Laravel 5.4 TokenMismatchException Ajax call - ajax

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);
}

Answer 1

Add the token to the ajax's data :
$.ajax({
type: 'POST',
......
data: {'_token': '{{ csrf_token() }}'},
........

Answer 2

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);
}
});

Answer 3

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

Answer 4

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);
}
});

Answer 5

You can try to disable CSRF verification on specific route in App\Http\Middleware\VerifyCsrfToken.php
protected $except = ['/comments'];