javascript - Axios fails CORS but fetch works fine - Stack Overflow

admin管理员组

文章数量:1279247

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

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

• javascript
• rest
• vue.js
• cors
• nuxt.js

Share Improve this question Follow edited Nov 11, 2020 at 20:32 JonnyT asked Nov 11, 2020 at 20:19 JonnyTJonnyT 9311 gold badge11 silver badge77 bronze badges 3

• What is data? A string? An object? A FormData object? A Blob object? – Quentin Commented Nov 11, 2020 at 20:21
• Have you looked at the request headers from fetch and axios? Are they equal? – acincognito Commented Nov 11, 2020 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 Commented Nov 11, 2020 at 20:24

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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
Access-Control-Allow-Methods: POST, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400

Try adding withCredentials:

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

本文标签： javascriptAxios fails CORS but fetch works fineStack Overflow