shadkamel's avatar

laravel sanctum authentication with SPA and CSRF token mismatch.

hello everyone, i have to separate project (Laravel) and (Vue js,) i have installed (axios) library in vue project to request to laravel, when i request to /sanctum/csrf-cookie route, i get the response code of 204 no content and two errors in console says:

Cookie “XSRF-TOKEN” has been rejected for invalid domain.

Cookie “laravel_session” has been rejected for invalid domain.

vue js url : http://localhost:5173/

laravel url: http://127.0.0.1:8000/

.env

SANCTUM_STATEFUL_DOMAINS=localhost:5173
SESSION_DOMAIN=localhost

cors.php

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => true,

];

thank you for your help

0 likes
8 replies
tisuchi's avatar

@shadkamel You need to make sure the XSRF-TOKEN and laravel_session cookies have the correct domain. You can set the SESSION_DOMAIN in the .env file to localhost so that both cookies are set on the correct domain.

Can you double confirm this behavior?

shadkamel's avatar

@tisuchi in .env file i set this variable as the documentations like this:

SANCTUM_STATEFUL_DOMAINS=localhost:5173
SESSION_DOMAIN=localhost

Please or to participate in this conversation.