Level 50
Go through this: https://laravel.com/docs/9.x/sanctum#spa-authentication
And a simple example on security headers: https://danieldusek.com/enabling-security-headers-for-your-website-with-php-and-laravel.html
1 like
Jul 6, 2022
9
Level 63
XSRF-TOKEN not sent by axios
Hello,
UPDATE OF MY POST
Even if I know quite well the basis of VueJS, my knowledge around security and deployment is very low. And that's the first time I try to deploy a VueJS frontend.
I have a Laravel app with a VueJS frontend in a separate environment but on the same domain.
Local Laravel API : localhost:8000 Frontend : localhost:3000 in production mode or localhost:8080 in dev mode
Laravel API : back.domain.com Frontend : front.domain.com
I have restarted the configuration from zero reading the Sanctum documentation. Now with both localhost:8000 and localhost:3000 it doesn't work. In fact the csrf-token is retrieved, but it is not sent in the HTTP headers when I try to log in. So I have a 419 error.
Axios is configured as below.
const api = axios.create({
baseURL: 'http://localhost:8000',
withCredentials: true,
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
})
What should I check to solve this issue ?
Thanks a lot ;).
V
Level 63
@Niush I have followed your first link to write the code.
But I don't have added any security headers. I'm lost in all the headers ... which one do I have to add ? First I thought it was a CORS problem, but it doesn't seem to be one.
Level 50
@vincent15000 You can scan your domain here: https://securityheaders.com/. It will show and explain security header problems. These headers most probably are not the one causing the APIs to not work.
It would either be CORS issue, incorrect API URL etc. Do the APIs work when called using Postman?
Level 1
@vincent15000 You may need to edit your cors.php file in your Laravel project that is in the config folder and edit the 'allowed_origins' variable by including the url of your frontend and set the 'supported credentials' to true
'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['front.domain.com'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
1 like
Level 63
@Keshi That's already done ... furthermore I have let allowed_origins with * value which should allow any origin, shouldn't it ?
Level 1
Whar errors are you getting in production mode?
1 like
Level 63
I have solved my issue ... it's not very simple to configure axios and sanctum and cors well at the first time. But I have set all well and it works.
The main problem was the configuration of the SESSION_DOMAIN for which I had specified the port and you have to not specify the port.
Please or to participate in this conversation.