Laravel 5.4 TokenMismatchException Ajax call

Question

I get a TokenMismatchException error only when I submit a form with an ajax call? If I don't use an Ajax call I don't get the error.

What is causing this?

Laravel 5.4

I have this in the head of my app.blade.php:

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

My ajax.js

$( document ).ready(function() {
    // storing comments
    $('#storeComment').on('submit', function(e) {
        e.preventDefault();

        $.ajax({
            method: 'POST',
            url: '/comments',
            data: {},
            success: function(response){
                console.log(response);
            },
            error: function(jqXHR, textStatus, errorThrown) { 
                console.log(JSON.stringify(jqXHR));
                console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
            }
        });
    });
});

I also use the bootstrap.js that automatically registers the value of the csrf-token meta tag with the Axios HTTP library. As explained in the Laravel documentation.

Controlle Method:

public function store(CommentRequest $request)
{
    $comment = Auth::user()->comments()->save(new Comment($request->all()));

    $response = array(
        'status' => 'success',
        'comment' => $comment
    );

    return response()->json($response);
}

@ShaielndraGupta I don't think this is necessary since I store it in the meta tag as explained in the laravel documentation? — Michael, Oct 09 '18 at 11:40
Because `automatic csrf injection` is in axios, not in jquery. — Tharaka Dilshan, Oct 09 '18 at 11:50
@Michael you're correct. The ajaxSetup call should set the header appropriately for you. I think you may have an underlying issue with your sessions. — Devon Bessemer, Oct 09 '18 at 11:50
there is no ajax setup in this question. read the question again. He explicitly says "I also use the bootstrap.js that automatically registers the value of the csrf-token meta tag with the Axios HTTP library. As explained in the Laravel documentation." — Tharaka Dilshan, Oct 09 '18 at 11:52
@TharakaDilshan the op removed it, he had the line mentioned here in the first revision https://laravel.com/docs/5.7/csrf#csrf-x-csrf-token — Devon Bessemer, Oct 09 '18 at 11:55
of course i saw earlier version of this question. but it has nothing to do now. — Tharaka Dilshan, Oct 09 '18 at 11:56

score 1 · Answer 1 · answered Oct 09 '18 at 11:43

1

Add the token to the ajax's data :

$.ajax({
type: 'POST',
 ......
data: {'_token': '{{ csrf_token() }}'},
........

answered Oct 09 '18 at 11:43

Tania Petsouka

1,388
1
9
20

This still causes a TokenMisconception (same error) – Michael Oct 09 '18 at 11:45
Do you use your meta's token to ajax headers? See here https://stackoverflow.com/questions/32738763/laravel-csrf-token-mismatch-for-ajax-post-request at zarpio's answer. – Tania Petsouka Oct 09 '18 at 11:55

Nikola Gavric · Answer 2 · 2018-10-09T12:41:13.593

Instead of calling jQuery you can call Axios directly and have this automatic csrf injection, with the following code:

var data = ['name' => 'Nikola', 'lastName' => 'Gavric'];
axios.post('/comments', data).then(function(response) {
    console.log(response);
});

EDIT: Complete example for axios is

$('#storeComment').on('submit', function(e) {
    e.preventDefault();

    // Retrieve form data
    var temp = [];
    var data = $(this).serializeArray();
    $.each(data, function(index, field) {
        temp[field.name] = field.value;
    });

    // Post request with temp as data
    axios.post('/comments', temp).then(function(data) {
        console.log(data); 
    });
});

And this is the code for jQuery, use whichever approach you like better:

    $.ajax({
        method: 'POST',
        url: '/comments',
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        },
        data: {
            'name': 'Nikola',
            'lastName': 'Gavric'
        },
        success: function(response){
            console.log(response);
        },
        error: function(jqXHR, textStatus, errorThrown) { 
            console.log(JSON.stringify(jqXHR));
            console.log("AJAX error: " + textStatus + ' : ' + errorThrown);
        }
    });

score 0 · Answer 3 · answered Oct 09 '18 at 12:25

0

$.ajax({
          type: 'POST',
          ........
            headers: {
                 'X-CSRF-TOKEN': '{{ csrf_token() }}'
           }    
         ...........
  });

try this...

answered Oct 09 '18 at 12:25

Parth kharecha

6,135
4
25
41

score 0 · Answer 4 · answered Oct 09 '18 at 13:00

Add csrf-token to head of your application :

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

then :

$.ajax({
  url: '/some/url',
  type: 'POST',
  headers: {
    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
  },
  success: function(res){
      // Your result
      console.log(res);
  }
});

score -1 · Answer 5 · answered Oct 09 '18 at 11:46

-1

You can try to disable CSRF verification on specific route in App\Http\Middleware\VerifyCsrfToken.php

 protected $except = ['/comments'];

answered Oct 09 '18 at 11:46

qqmydarling

167
1
7
16

1

Do not disable csrf protection, find the underlying cause for the token error. – Devon Bessemer Oct 09 '18 at 11:53
Devon I don't know if you are aware that the call question owner asked for is obviously an API call. API calls by default should be put inside of CSRF exclusion, can you please elaborate your downvotes. Thanks – Nikola Gavric Oct 09 '18 at 12:04
The reason for this is whoever is using your API doesn't know CSRF token and doesn't have to know it, thus all API urls are excluded from the CSRF checks – Nikola Gavric Oct 09 '18 at 12:07
@NikolaGavric, I do not see anywhere that this is an "api" call. No api token is being passed. All post requests need some sort of token to prevent CSRF attacks. – Devon Bessemer Oct 09 '18 at 13:10
I do because he is not serving any HTML content, but rather `application/json` which indicates it's an `ajax` call which further indicates it must be an `API` call and not a `web` call @Devon – Nikola Gavric Oct 09 '18 at 13:12
@NikolaGavric that makes no difference in this context. The fact that the user is not passing any token suggests they are using an authenticated session. APIs still require a token. Otherwise an attacker can force them to post comments on their behalf by posting to the same url with xss or from another site. – Devon Bessemer Oct 09 '18 at 13:15

Laravel 5.4 TokenMismatchException Ajax call

5 Answers5