经过多次尝试，Laravel 5.5在ajax调用上持续获得419个错误

Question

I would really appreciate some help on this. I tried every solution that every one suggested on other posts, including this: Laravel 5.5 ajax call 419 (unknown status) and this Ajax LARAVEL 419 POST error solutions.

But I keep getting 419 error even if I set the csrf_token meta tag on the head section:

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

And before ajax post call, I set up the ajax csrf_token like this:

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

And after that I send the csrf_token in ajax data as a variable like this:

$.ajax({
        url     : "/getCompare",
        type    :"POST",
        cash    : false,
        data    :{ id : id,_token: '{{csrf_token()}}'},
        success :
           function( response ) {
              $("#compare_products").html(response);
             }
        });

The application of the page is in such way that the user repeatedly requests for ajax calls to compare products. It works fine in lots of attempts but in a specific scenario, it throws 419 error. The scenario is sometimes when I push a button about 3 minutes after page load, it gives me that error. Or sometimes it gives the error on the third or fourth attempt. And after reloading the page the problem fixed but it keeps sending that error again in the way that I explained.

My question is why is this happening? is csrf_token expired after 3 minutes or what? And I don't want to add an exception in verifyCsrfToken middleware. Whats the solution to this problem?

PS: leorent's answer is quite right. But after uploading my project into an actual online server. the problem was gone already. I don't know why but this problem is because of windows and running the laravel project locally in local host. The csrf token session expires frequently on widows localhost server. Don't worry, after uploading the project into an actual server, your problem with csrf is going to be solved automatically.

Answer 1

Add the meta tag with an id:

<input type="hidden" name="_token" id="token" value="{{ csrf_token() }}">

then on your ajax call:

     $.ajax({
         url     : "/getCompare",
         type    :"POST",
         cash    : false,
         data: {'id': id, "_token": $('#token').val()},
         type: 'POST',


         success: function (response) {

         },
         error: function (response) {

         }
     });