CODEWITHSUNDEEP
laravelvue.jsaxios
Daniel Graziani
Daniel Graziani

Reputation: 23

Axios returns Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers

I have a Laravel app in which I use axios in a VueJS component to send GET requests to an external public API upon clicking a button, but it throws these error:

[Error] Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.
[Error] XMLHttpRequest cannot load http://api.icndb.com/jokes/random due to access control checks.
[Error] Failed to load resource: Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers. (random, line 0)

Here is my failed attempt:

const url = "http://api.icndb.com/jokes/random";
const response = await axios.get(url);

I just should receive some Chuck Norris jokes to print on the console...

PS: I've seen some facts relative to CORS but I didn't get anything out of it, so here I am.

Upvotes: 1

Views: 6564

Answers (1)

Douwe de Haan
Douwe de Haan

Reputation: 6646

Laravel uses a header to be able to determine wether a request was XHR or a normal request.

In the source code of Laravel you can see the Request::ajax() method, which calls the isXmlHttpRequest() method from Symfony.

The only issue with this is that CORS doesn't really like such headers.

If you want to remove it, check bootstrap.js in resources/js and compile your assets again.

Another solution would be to delete the header just before the call:

delete axios.defaults.headers.common['X-Requested-With'];

Upvotes: 6

Related Questions