title: Laravel Sanctum + Nuxt JS I cannot pass CORS
body: <p>Before start, I'd like to say that I searched and tried many approaches and none of them seem to work properly. I also created a fresh Laravel installation but still, no success.</p>
  <p>The problem is CORS, I get blocked by CORS always.</p>
  <ul>
  <li>The setup uses <code>Laravel Valet</code>.</li>
  <li>The Laravel Application runs at <code>https://sanctum.test</code></li>
  <li>The NuxtJs Application runs at <code>https://nuxt.sanctum.test</code></li>
  </ul>
  <p>It's a fresh installation.</p>
  <p>My <code>.env</code> file has the required settings:</p>
  <pre><code>SESSION_DOMAIN=.sanctum.test  
  SANCTUM_STATEFUL_DOMAINS=sanctum.test,nuxt.sanctum.test
  </code></pre>
  <p>My <code>cors.php</code> has the required settings:</p>
  <pre class="lang-php prettyprint-override"><code>...
      'supports_credentials' =&gt; true,
  ...
  </code></pre>
  <p>My <code>Http/Kernel.php</code></p>
  <pre class="lang-php prettyprint-override"><code>...
          'api' =&gt; [
              EnsureFrontendRequestsAreStateful::class,
              'throttle:api',
              \Illuminate\Routing\Middleware\SubstituteBindings::class,
          ],
      ];
  </code></pre>
  <p>My NuxtJs App runs on http://localhost:3000 and I have a Laravel Valet reverse proxy so I can access it from <code>https://nuxt.sanctum.test</code> and I can confirm that's working as expected.</p>
  <p>Here's my <code>nuxt.config.js</code>:</p>
  <pre class="lang-js prettyprint-override"><code>export default {
    ssr: false,
  
    target: 'server',
  
    head: {
      title: process.env.npm_package_name || '',
      meta: [
        { charset: 'utf-8' },
        { name: 'viewport', content: 'width=device-width, initial-scale=1' },
        {
          hid: 'description',
          name: 'description',
          content: process.env.npm_package_description || '',
        },
      ],
      link: [{ rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }],
    },
  
    css: [],
  
    plugins: [],
  
    components: true,
  
    buildModules: ['@nuxtjs/eslint-module', '@nuxtjs/tailwindcss'],
  
    modules: [
      '@nuxtjs/axios',
      '@nuxtjs/auth-next',
      '@nuxtjs/pwa',
      '@nuxtjs/dotenv',
    ],
  
    auth: {
      strategies: {
        laravelSanctum: {
          provider: 'laravel/sanctum',
          url: 'https://sanctum.test',
        },
        cookie: {
          cookie: {
            name: 'XSRF-TOKEN',
          },
        },
      },
    },
  
    router: {
      middleware: ['auth'],
    },
  
    axios: {
      proxy: true,
      credentials: true,
    },
    proxy: {
      '/laravel': {
        target: 'https://sanctum.test',
        pathRewrite: { '^/laravel': '/' },
      },
    },
  
    build: {},
  }
  </code></pre>
  <p>Now, no matter what I do, I always get the same error from the Laravel Application:</p>
  <pre><code>Access to XMLHttpRequest at 'https://sanctum.test/sanctum/csrf-cookie' from origin 'https://nuxt.sanctum.test.test' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
  </code></pre>
  <p>As you can see above, the request is being made from the subdomain to the main domain. And as I showed above, the <code>SANCTUM_STATEFUL_DOMAINS</code> is correct.</p>