Request header field X-CSRF-TOKEN is not allowed by Access-Control-Allow-Headers

Question

I\'m making a get request to embed.rock using vue and axios.

axios({
  method: \'get\',
  url: \'https://api.embed.rocks/api?url=\' + this.url,
  headers: {
         


        

Answer 1

Laravel is setting a global configuration to include automatically the X-CSRF-TOKEN in the headers of the request in your bootstrap.js file.

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

Therefore, if you want to remove the token, you can achieve it like this:

var instance = axios.create();
delete instance.defaults.headers.common['X-CSRF-TOKEN'];

instance({
    method: 'get',
    url: 'https://api.embed.rocks/api?url=' + this.url,
    headers: {
        'x-api-key': 'my-key'
    }
});