[Vuejs]-Allow X-CSRF-TOKEN in laravel+vuejs project?

by

0👍

You probably got something like this somewhere in your code

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

0👍

Can you try by adding this in your routes.

header('Access-Control-Allow-Origin:*');
header('Access-Control-Allow-Methods:GET, POST, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token,authorization');

I was facing the similar issue and adding this line in my routes file helped me to solve the issue.

0👍

The other server does not accept the X-CSRF-TOKEN in a CORS request.

There’s not much you can do about that other than not sending the token in the request. In fact, sending the CSRF token to a remote server can compromise the safety of your users. Unless of course the other server is a server you control.

Just remove the lines that set the header in axios from your bootstrap.js to allow axios to do CORS requests but remember to always send the token.

0👍

Replace document.head.querySelector('meta[name="csrf-token"]'); by $('meta[name="csrf-token"]').attr('content');

let token = $('meta[name="csrf-token"]').attr('content');
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');
}

Leave a comment