CSRF token issues with multiple ajax calls

Question

I have a laravel page that allows users to save a search but only if they are logged in. They can log in with no problem or save a search with no problem, the CSRF token is accepted. However, if the user has to log in and then save a search I get the "CSRF token mismatch." error.

I'm assuming that a new token is generated on each post or database update but not sure. Should I be retrieving a new CSRF token after the post to the controller and then updating the CSRF inputs on the page?

I've tried with this in my header

<meta name="csrf-token" content="{{ csrf_token() }}">

and also using this in my forms

@csrf

and then in my ajax calls

var token    = $('[name=_token]').val();

The token is being passed in the parameters so I know it is there but will only work on the first ajax call

Hey @xjx424 ! Are you able to share some of the code that you're working with? — FullStackOfPancakes, Jul 24 '19 at 20:27
Sweet, thank you! I'm assuming you've read [here](https://laravel.com/docs/5.8/csrf#csrf-x-csrf-token) about adding the token to all request headers? — FullStackOfPancakes, Jul 24 '19 at 20:37
Yes, tried that too. It keeps passing the same token each time via data or the header. Does the token value change after any posts? — xjx424, Jul 24 '19 at 20:39
I believe it's per user session, so shouldn't change between post requests — FullStackOfPancakes, Jul 24 '19 at 20:40
I didn't think so. Do you know of a way to retrieve the token? I tried via ajax but I can't view the results from the controller because the token mismatch error shows every time. — xjx424, Jul 24 '19 at 20:49
I found [this](https://stackoverflow.com/questions/32738763/laravel-csrf-token-mismatch-for-ajax-post-request/57050708) answer on SO - let me know if perhaps that solves the issue. — FullStackOfPancakes, Jul 24 '19 at 20:51
Thanks but I've already seen that post. I've probably seen every SO related question over the past 4 hours :) — xjx424, Jul 24 '19 at 21:00

score 1 · Answer 1 · answered Jul 24 '19 at 22:23

I'm not sure how you're getting the data from ajax, but the token variable you have assigned may not be getting the right data. At least not if your meta above is what is setting it.

You might try changing your token setting using the content attrib, not val() as follows (IE test removing from the form and use the token you set in the meta):

var token = $('meta[name="csrf-token"]').attr('content');

The other thing to check is how you are placing that into your ajax. I find it works best when set into the ajax headers in a base file higher up than your ajax - calling the headers outside the current ajax call will usually resolve the issue of a csrf mismatch as you are having.

$.ajaxSetup({
 headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
 }
});

score 1 · Answer 2 · answered Jul 25 '19 at 01:30

I have solved an urgent support call! Just for a while! Maybe not the best way, but that time it worked!

First, I created a javascript function to update the token:

function renewToken() {
    var csrfUrl = $("meta[name='url_page']").attr('content') + '/refresh_csrf';

    $.get(csrfUrl, function (data) {
        $('meta[name="csrf-token"]').attr('content', data);
    });
    return;
 }

So I created this route:

Route::get('/refresh_csrf', function () {
    return response()->json(csrf_token());
})->name('csrf.renew')->middleware('auth'); /* Test */

Because, when the token expired before each new ajax request, the blade still continued having an old token. But, this function was used to update the token before each ajax request.

For example:

$(document).on('click', '.open_modal', function () {
   renewToken();
   var group_id = $(this).val();

   $.get(url + '/' + group_id, function (data) { ...

score 0 · Answer 3 · answered Jul 26 '19 at 13:18

0

Turns out there was left over line of code from a test that was refreshing the session, stupid mistake on my part.

answered Jul 26 '19 at 13:18

xjx424

173
2
12

CSRF token issues with multiple ajax calls

3 Answers3