I have a VueJS app and a Laravel API in separated projects. I have some issues to auth with laravel sanctum. My VueJs is on localhost:8080 and my API on localhost:8000
When i try to set cookie, i have a "This set-cookie domain attribute was invalid with regards to the current host url" issue
I think that laravel cant set cookie, when i try to auth he returned a 419 error status which mean token mismatch.
My config/cors.php
'paths' => [
'api/*',
'sanctum/csrf-cookie',
'login',
'logout'
],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
I follow the laravel documentation.
Add theses lines to my app/Http/Kernel.php
use Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful;
'api' => [
EnsureFrontendRequestsAreStateful::class,
'throttle:api',
\Illuminate\Routing\Middleware\SubstituteBindings::class,
],
I activated axios credentials in my vue app
axios.defaults.withCredentials = true;
I set my SESSION_DOMAIN=localhost:8080.
In my VueJS login component :
axios
.get('/sanctum/csrf-cookie')
.then(response => {
axios.post('/login', {
email : '[email protected]',
password : 'password'
}).then(response => {
console.log('User signed in!');
}).catch(error => console.log(error)); // credentials didn't match
});
The request for csrf-cookie enter image description here
The request for login enter image description here