laravel ajax token,php - Laravel csrf token mismatch for ajax POST Request - Stack Overflow

Know that there is an X-XSRF-TOKEN cookie that is set for convenience. Framework like Angular and others set it by default. Check this in the doc https://laravel.com/docs/5.7/csrf#csrf-x-xsrf-token

You may like to use it.

The best way is to use the meta, case the cookies are deactivated.

var xsrfToken = decodeURIComponent(readCookie('XSRF-TOKEN'));

if (xsrfToken) {

$.ajaxSetup({

headers: {

'X-XSRF-TOKEN': xsrfToken

}

});

} else console.error('....');

Here the recommended meta way (you can put the field any way, but meta is quiet nice):

$.ajaxSetup({

headers: {

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

}

});

Note the use of decodeURIComponent(), it's decode from uri format which is used to store the cookie. [otherwise you will get an invalid payload exception in laravel].

Here the section about the csrf cookie in the doc to check :

https://laravel.com/docs/5.7/csrf#csrf-x-csrf-token

Also here how laravel (bootstrap.js) is setting it for axios by default:

let token = document.head.querySelector('meta[name="csrf-token"]');

if (token) {

window.axios.defaults.headers.common['X-CSRF-TOKEN'] = token.content;

} else {

console.error('CSRF token not found: https://laravel.com/docs/csrf#csrf-x-csrf-token');

}

you can go check resources/js/bootstrap.js.

And here read cookie function:

function readCookie(name) {

var nameEQ = name + "=";

var ca = document.cookie.split(';');

for (var i = 0; i < ca.length; i++) {

var c = ca[i];

while (c.charAt(0) == ' ') c = c.substring(1, c.length);

if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);

}

return null;

}