Laravel Lighthouse Graphiql Introspection query failing to fetch

Question

I have a laravel graphql backend using Laravel Ligthouse, I'm using laravel Sanctum for authentication, the introspection query always fails to fetch with the following error on Graphiql:

{
  "errors": [
    {
      "message": "Failed to fetch",
      "stack": "TypeError: Failed to fetch\n    at https://unpkg.com/graphiql/graphiql.min.js:71200:22\n    at Generator.next (<anonymous>)\n    at https://unpkg.com/graphiql/graphiql.min.js:71119:67\n    at new Promise (<anonymous>)\n    at __webpack_modules__.../../graphiql-toolkit/esm/create-fetcher/lib.js.__awaiter (https://unpkg.com/graphiql/graphiql.min.js:71101:10)\n    at https://unpkg.com/graphiql/graphiql.min.js:71199:85\n    at https://unpkg.com/graphiql/graphiql.min.js:71028:54\n    at fetchIntrospectionData (https://unpkg.com/graphiql/graphiql.min.js:64389:40)\n    at https://unpkg.com/graphiql/graphiql.min.js:64411:39\n    at https://unpkg.com/graphiql/graphiql.min.js:64423:5"
    }
  ]
}

However, my queries and mutations are working correctly. It's just the instrospection query that is failing to fetch. If anything, here's my configuration for GraphiQL:

<script>
    const fetcher = GraphiQL.createFetcher({
        url: '{{ $url }}',
        subscriptionUrl: '{{ $subscriptionUrl }}',
    });

    function GraphiQLWithExplorer() {
        const [query, setQuery] = React.useState('');

        return React.createElement(GraphiQL, {
            fetcher,
            defaultHeaders: JSON.stringify({
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').content,
            }),
            query,
            onEditQuery: setQuery,
            defaultEditorToolsVisibility: true,
            plugins: [
                GraphiQLPluginExplorer.useExplorerPlugin({
                    query,
                    onEdit: setQuery,
                }),
            ],
        });
    }

    ReactDOM.render(
        React.createElement(GraphiQLWithExplorer),
        document.getElementById('graphiql'),
    );
</script>

My GrahiQL configuration:

 'routes' => [
        '/graphiql' => [
            'name'       => 'graphiql',
            'middleware' => ['web'],