Axios 失败 CORS 但 fetch 工作正常

Question

我已经浏览了所有其他有关 CORS 错误的问题，但没有运气。我正在 NuxtJS 客户端应用程序中发出一个简单的 POST 请求。如果我使用 axios，我会收到 CORS 错误，但如果我使用 fetch，它就可以正常工作。我想使用 axios，但我无法解决这个问题。服务器设置了正确的“Access-Control-Allow-Origin”标头（删除该标头后，下面的选项都不起作用）。有人知道为什么这适用于 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”标头存在于所请求的资源上。

在Chrome的网络选项卡中，请求标头显示如下：

axios请求头

获取请求头

Answer 1

当您在 HTTP 请求正文中发送数据时，请求的Content-Type标头指定您要发送的数据类型。

由于您要发送 JSON，标头应该是Content-Type: application/json.

由于您将一个对象传递给axios，它会将其编码为 JSON 并Content-Type自动设置正确的标头。

fetch不会自动执行此操作，您必须对数据进行编码并Content-Type自行设置。您只完成了其中的第一个，因此fetch默认声明您正在发送纯文本而不是 JSON。

您的fetch代码有错误。

由于历史原因，当您使用可以通过常规 HTML 表单发送的格式发布数据时，没有特殊的 CORS 要求。text/plain就是这样一个格式。

由于application/json不是，浏览器使用CORS 预检请求向服务器请求许可。

服务器未授予该权限。

它需要做出如下响应：

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