CODEWITHSUNDEEP
laravelvue.jssessionfirefoxcsrf
BigLvM
BigLvM

Reputation: 1

Laravel/Vue - Sessions on firefox not working correctly (CSRF token mismatch, session data is null, etc)

I'm working on a project with Laravel and inline vue*. For submitting forms we use axios-calls.

On chrome there is no issue, but in Firefox, with every axios call it gives back a 419 error 'csrf tokens mismatched'.

I googled this issue, and some say adding the CSRF-token to the header. Did that, see below, but it does not work.

axios.defaults.headers.common = {
  'X-Requested-With': 'XMLHttpRequest',
  'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content'),
  'X-XSRF-TOKEN': decodeURIComponent(this.readCookie('XSRF-TOKEN')),
};

After trying lot's of different answers, I added '*' to the $except array in VerifyCsrfToken.php. (= All my routes will not work with the CSFR-token, not a good practice, but i did this for debug)

The form will submit now. But in the form handling (controller.php), I save some data in the session. In chrome I get the data I need, in Firefox this session data is null.. So I guess the csrf-token stored in the user session is null in firefox. How do I fix this? How do I solve the issue with user-sessions?I also found out that when i send a request with firefox it creates an entire new session/file in storage/framework/sessions, always with a different _token..

I use this in myController.php, to store the data I need in the session:

$request->session()->put('formData', json_encode($data));
$request->session()->save();

TIA!

In .env

In session.php:

*: We use inline vue-scripts in the blade.php files to submit data.

I tried:

I expected it to make the site work, but alas, it does not.

Upvotes: 0

Views: 972

Answers (1)

BigLvM
BigLvM

Reputation: 1

Asked this question on r/laravel and it is solved.

It looks like Firefox isn't sending the session cookie, wich will cause all the problems you described as a result. Use the browser developer tools to inspect requests to confirm this. Then, try to configure Axios to always send cookies, something like withCredentials: true.

So I added "axios.defaults.withCredentials = true;". And it works! Will keep this here, so others might learn from my mistakes

Upvotes: 0

Related Questions