javascript - Axios 无法通过 CORS，但 fetch 工作正常

Question

我已经查看了有关 CORS 错误的所有其他问题，但没有运气。我正在 NuxtJS 客户端应用程序中发出一个简单的 POST 请求。如果我使用 axios，我会收到 CORS 错误，但如果我使用 fetch，它就可以正常工作。我想使用 axios，但我无法解决这个问题。服务器设置了正确的“Access-Control-Allow-Origin” header (删除该 header 后，以下选项均无效)。任何人都知道为什么这适用于 fetch 但不适用于 axios？
失败

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

作品

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

错误信息:
从源“http://localhost:3000”访问 {URL} 处的 XMLHttpRequest 已被 CORS 策略阻止:对预检请求的响应未通过访问控制检查:不存在“Access-Control-Allow-Origin” header 在请求的资源上。
在 Chrome 的网络标签中，请求头显示如下:
Axios request headers
fetch request headers

Answer 1

当您在 HTTP 请求的正文中发送数据时，请求的 Content-Type header 指定您要发送的数据类型。
由于您要发送 JSON，因此 header 应为 Content-Type: application/json .
由于您将对象传递给 axios ，它将其编码为 JSON 并设置正确的 Content-Type头自动。fetch不会自动执行此操作，您必须对数据进行编码并设置 Content-Type你自己。你只做了其中的第一个，所以fetch默认声称您发送的是纯文本而不是 JSON。
您的 fetch代码有错误。

由于历史原因，当您使用可以通过常规 HTML 表单发送的格式发布数据时，没有特殊的 CORS 要求。 text/plain是这样的格式。
由于application/json不是，浏览器使用 CORS preflight request 向服务器请求许可.
服务器未授予该权限。
它需要以如下方式响应:

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