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

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

the problem is that by default the CSRF Token is register as a common header with Axios soto solve this issue :

1- replace these lines in bootstrap.js

window.axios.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';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');}

by this line

window.axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

2- install qs module by npm ..... using thie link : https://www.npmjs.com/package/qs

3- define const of qs like below : const qs = require('qs');

4- use axios by defult like this :

axios.post('your link here ',qs.stringify({  'a1': 'b1',  'a2 ':'b2'})).then(response => {alert('ok');}).catch(error => alert(error));