Axios fails CORS but fetch works fine

Question

I've looked through all the other questions regarding CORS errors with no luck. I'm making a simple POST request in a NuxtJS client application. If I use axios, I get CORS errors, but if I use fetch, it works just fine. I would like to use axios, but I can't sort this out. The server has the correct "Access-Control-Allow-Origin" headers set (neither option below works when that header is removed). Anyone know why this would work for fetch but not axios?

FAILS

await this.$axios({
      url,
      method: 'POST',
      data
    })

WORKS

await fetch(url, {
      method: 'POST',
      body: JSON.stringify(data)
    })

Error message: Access to XMLHttpRequest at {URL} from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

In the network tab of Chrome, the request headers show as follows:

Axios request headers

fetch request headers

What is `data`? A string? An object? A FormData object? A Blob object? — Quentin, Nov 11 '20 at 20:21
Have you looked at the request headers from `fetch` and `axios`? Are they equal? — acincognito, Nov 11 '20 at 20:22
Sorry, I incorrectly copied the fetch request initially. "data" is a javascript object. Axios takes an object, but for fetch, I stringified it. — JonnyT, Nov 11 '20 at 20:24

score 9 · Accepted Answer · answered Nov 11 '20 at 20:29

9

When you send data in the body of an HTTP request, the request's Content-Type header specifies what type of data you are sending.

Since you are sending JSON the header should be Content-Type: application/json.

Since you are passing an object to axios, it encodes it as JSON and sets the proper Content-Type header automatically.

fetch doesn't do this automatically, you have to encode the data and set the Content-Type yourself. You've only done the first of these, so fetch is defaulting to claiming that you are sending plain text instead of JSON.

Your fetch code is in error.

For historical reasons, there are no special CORS requirements when you POST data using a format that you could send with a regular HTML form. text/plain is such a format.

Since application/json is not, the browser asks permission from the server using a CORS preflight request.

The server is not granting that permission.

It needs to respond with something like:

HTTP/1.1 204 No Content
Connection: keep-alive
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

answered Nov 11 '20 at 20:29

Quentin

914,110
126
1,211
1,335

1

If my fetch code is wrong, why is that one working while the axios call is failing? – JonnyT Nov 11 '20 at 20:34
Because the fetch code is lying about what it is sending but the server is processing it as JSON despite the claim it is plain text. – Quentin Nov 11 '20 at 20:35
Ah, I see. And CORS is being enforced for axios because it's automatically setting the correct "Content-Type: application/json" header. So if I correctly set the header in my fetch request, it should fail just like the axios call. Am I understanding correctly? – JonnyT Nov 11 '20 at 20:40
Just tested it. Yeah, the fetch failed when I set the Content-Type header. Now I just need to fix the CORS issues for both of them haha. – JonnyT Nov 11 '20 at 20:53
Legend, I missed this somehow... great explanation! – doz87 Oct 05 '21 at 12:47

score -2 · Answer 2 · answered Nov 11 '20 at 20:23

-2

Try adding withCredentials:

axios({
    method: "POST",
    url: "http://....",
    data: {},
    withCredentials: true
})

answered Nov 11 '20 at 20:23

Michael

1,058
10
17

That definitely will not help. `withCredentials` mandates a preflight request, and the preflight request is failing. – Quentin Nov 11 '20 at 20:24

Axios fails CORS but fetch works fine

2 Answers2

Linked