X-XSRF-TOKEN not send with axios

The key is X-CSRF-TOKEN make sure you don't mispelled it as you use it in your comment couple of times as the wrong name.

@NAKOV - I'm not mispelling it, i'm really talking about the X-XSRF-TOKEN and not X-CSRF-TOKEN which is correctly set in every request.

@MAX13 - Sorry, then this answer might be helpful.

@NAKOV - The setting seems to already be correctly set, for this header to be automatically sent by axios, and it is for most of the requests made by Spark in their stock code. In mine, following the exact same way of making requests, it's not.

As written in my first post, I have a test script sending the 2 requests, the first after the other, the first one sends the header, the other doesn't, while it's the exact same way, I'm not sure it's about axios configuration now, don't you think?

@MAX13 - As I read on the internet about XSRF it should be the same with CSRF which is against cross-site request forgery, in Laravel for example is used for delete, put and post http methods, but not for get method type. So I don't know what your usage is but make sure that for the routes that you want protected the method type is one of the above.

@NAKOV - Thanks for your reply. Please, read my entire first post.

While I know that XSRF/CSRF are made to avoid forgery, the problem isn't my comprehension of the process, but the fact that Laravel needs it to validate (even a GET) request.

If I add my Route:apiResource in web.php routes, both web requests and API requests (Authorization: Bearer [token]) works fine, even though the X-XSRF-TOKEN header is present in the GET requests made in stock laravel code, while in mine it's not set.

If I move my Route:apiResource in api.php, the API requests are fine, but the web requests aren't and return 401. After reviewing the console, it appears that the only difference between a stock laravel code request and my code, is that the X-XSRF-TOKEN header is missing.

According to Chrome, here are the headers of a stock laravel code request (Response: 200):

GET /spark/plans HTTP/1.1
Host: [...]
Connection: keep-alive
X-Requested-With: XMLHttpRequest
X-XSRF-TOKEN: [...]
X-CSRF-TOKEN: [...]
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: [...]

Here are the headers of a request I'm doing (Reponse 401):

GET /api/spark/kiosk/regulations HTTP/1.1
Host: [...]
Connection: keep-alive
X-Requested-With: XMLHttpRequest
X-CSRF-TOKEN: [...]
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/74.0.3729.169 Safari/537.36
Accept: */*
Accept-Encoding: gzip, deflate
Accept-Language: fr-FR,fr;q=0.9,en-US;q=0.8,en;q=0.7
Cookie: [...]

Note, the code I'm trying:

axios.get('/spark/plans')
     .then(() => {
        axios.get('/api/spark/kiosk/regulations');
     });

So pretty straightforward and simply showing no difference between how the requests are made, still showing a missing header.

Thanks

Hi @max13 were you able to find out why axios didn't add the XSRF token?

Hi @danielp, unfortunately, I didn't find out why. I ended up putting the project on hold, now we have Spark 10, I thought it's OK.

Are you on Spark 10 ?

I found this thread while facing the same issue, later I found this repo . If you want to pair laravel breeze with your Vue SPA. the repo shows how to send xsrf-token with requests.