Laravel Sanctum + Nuxt JS I cannot pass CORS

Question

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.

The problem is CORS, I get blocked by CORS always.

• The setup uses Laravel Valet.
• The Laravel Application runs at https://sanctum.test
• The NuxtJs Application runs at https://nuxt.sanctum.test

It's a fresh installation.

My .env file has the required settings:

SESSION_DOMAIN=.sanctum.test  
SANCTUM_STATEFUL_DOMAINS=sanctum.test,nuxt.sanctum.test

My cors.php has the required settings:

...
    'supports_credentials' => true,
...

My Http/Kernel.php

...
        'api' => [
            EnsureFrontendRequestsAreStateful::class,
            'throttle:api',
            \Illuminate\Routing\Middleware\SubstituteBindings::class,
        ],
    ];

My NuxtJs App runs on http://localhost:3000 and I have a Laravel Valet reverse proxy so I can access it from https://nuxt.sanctum.test and I can confirm that's working as expected.

Here's my nuxt.config.js:

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: {},
}

Now, no matter what I do, I always get the same error from the Laravel Application:

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.

As you can see above, the request is being made from the subdomain to the main domain. And as I showed above, the SANCTUM_STATEFUL_DOMAINS is correct.

Rettarettig

Perhaps related to this issue: github.com/fruitcake/laravel-cors/issues/421 – Road

I found the problem, please check the answer below. – Rettarettig

Answer 1

Found the problem after a night of sleep!

I was missing the config/cors.php configuration for the additional endpoints:

<?php

return [
    'paths' => ['api/*', 'sanctum/*', 'login', 'logout'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,
];

Rettarettig

Answer 2

In my case I missed to add SANCTUM_STATEFUL_DOMAINS in the .env file of Laravel app as below.

SANCTUM_STATEFUL_DOMAINS=http://localhost:3000

If you go to config/sanctum.php you will see a variable SANCTUM_STATEFUL_DOMAINS

Brume