I know there is already a ton of questions on CORS-errors and Sanctum because I have the feeling I have read them all by now. But unfortunately I could not find a solution to my issue. I have a regular Laravel API-project with Sanctum and Fortify installed and completely configured and a Vite/Vue-project as frontend, both running in a Laravel Herd development environment. The API is running under api.picabase.test, the frontend under picabase.test.

Everything seems to be set up correctly because I can login without any issue. CSRF-token is requested and send and after that the authentication also works without an issue with all the expected user-data loaded in the Pinia-store. But what I don't understand is that every consecutive request to the API is denied because of a CORS-error with the code: ERR_NETWORK and the message "Network Error", so very general. It looks more like a backend error than an actual CORS-error.

If I then look in the Network-tab of the Developer tools of Chrome I can see this flow showing that the authentication request is indeed handled flawlessly and that my next request (in this case an attempt to change my password as logged in user) is preflighted correctly but is then for some reason redirected to the root of my API and that (I assume) results in a CORS-error.

Any idea on how to solve or debug this is very welcome as I am completely out of ideas.

Relevant settings from the .env are:

• SESSION_DOMAIN=".picabase.test"
• SANCTUM_STATEFUL_DOMAINS=picabase.test
• FRONTEND_URL=

Config file cors.php is like this:

return [
    'paths' => [
        'api/*',
        'sanctum/csrf-cookie',
        'register',
        'resend-email-verification',
        'authenticate',
        'authenticate-by-remember_token',
        'fot-password',
        'reset-password',
        'logout'
    ],
    'allowed_methods' => ['*'],
    'allowed_origins' => [env('FRONTEND_URL')],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

Setting for home in the config file fortify.php is:

'home' => env('FRONTEND_URL'),

I know there is already a ton of questions on CORS-errors and Sanctum because I have the feeling I have read them all by now. But unfortunately I could not find a solution to my issue. I have a regular Laravel API-project with Sanctum and Fortify installed and completely configured and a Vite/Vue-project as frontend, both running in a Laravel Herd development environment. The API is running under api.picabase.test, the frontend under picabase.test.

Everything seems to be set up correctly because I can login without any issue. CSRF-token is requested and send and after that the authentication also works without an issue with all the expected user-data loaded in the Pinia-store. But what I don't understand is that every consecutive request to the API is denied because of a CORS-error with the code: ERR_NETWORK and the message "Network Error", so very general. It looks more like a backend error than an actual CORS-error.

If I then look in the Network-tab of the Developer tools of Chrome I can see this flow showing that the authentication request is indeed handled flawlessly and that my next request (in this case an attempt to change my password as logged in user) is preflighted correctly but is then for some reason redirected to the root of my API and that (I assume) results in a CORS-error.

Any idea on how to solve or debug this is very welcome as I am completely out of ideas.

Relevant settings from the .env are:

• SESSION_DOMAIN=".picabase.test"
• SANCTUM_STATEFUL_DOMAINS=picabase.test
• FRONTEND_URL=http://picabase.test

Config file cors.php is like this:

return [
    'paths' => [
        'api/*',
        'sanctum/csrf-cookie',
        'register',
        'resend-email-verification',
        'authenticate',
        'authenticate-by-remember_token',
        'fot-password',
        'reset-password',
        'logout'
    ],
    'allowed_methods' => ['*'],
    'allowed_origins' => [env('FRONTEND_URL')],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => true,
];

Setting for home in the config file fortify.php is:

'home' => env('FRONTEND_URL'),

• laravel
• cors
• fortify
• sanctum

• Can you please include the .env file content? – skdishansachin Commented Jan 18 at 10:07
• Added the requested data (and some more) – Edwin van Dessel Commented Jan 18 at 14:17

2 Answers 2

Can you try the following?

1. Check the response header of api.picabase.test? See if Access-Control-Allow-Origin header exists. From the console log result, it looks like it's not there, but I would appreciate if there's a screenshot.

2. Check your web server's (apache or nginx) configuration. There might be a line that removes specific headers when returning the responses.

For me, I handle the cors on nginx side. So my configuration contains this line of code.

add_header Access-Control-Allow-Origin $http_origin always;

Here is my cors.php, and .env (local) for reference:

<?php

return [

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => [],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

SESSION_DRIVER=redis
SESSION_LIFETIME=120
SESSION_ENCRYPT=false
SESSION_PATH=/
SESSION_DOMAIN=null

SANCTUM_STATEFUL_DOMAINS=localhost:8081,localhost:3033,localhost:3031,localhost:3032

I'm not using fortify, instead I use nuxt as the frontend framework, but I think it's most likely the same.

Finally found an answer with the big help of this article: Cookie based authentication with Sanctum. Behaviour is the consequnce of the fact that Laravels notes that the user is already authenticated and does a redirect. Scroll way down the article and you will find how to adapt the redirectToUsers-middleware. Tinker a bit with the response of the custom exception you have to throw there (in my case changing to a 200 response) and logging is workt all the time