Axios失败CORS但获取工作正常

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)
    })

错误消息：CORS策略阻止从源http://localhost:3000访问{URL}处的XMLHttpRequest：对预检请求的响应无法通过权限改造检查：请求的资源上不存在“访问控制允许源”标头。

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

Axios请求标头

获取请求头

Answer 1

匿名用户

尝试添加< code>withCredentials:

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

Answer 2

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

由于您要发送 JSON，因此标头应为“内容类型：应用程序/json”。

由于您将对象传递给axios，因此它将其编码为JSON并自动设置适当的Content-Type标头。

< code>fetch不会自动执行此操作，您必须对数据进行编码并自己设置< code>Content-Type。您只做了其中的第一项，所以< code>fetch默认声明您发送的是纯文本而不是JSON。

您的获取代码出错。

由于历史原因，当您使用可以使用常规 HTML 表单发送的格式 POST 数据时，没有特殊的 CORS 要求。文本/纯文本就是这样一种格式。

由于＜code＞application/json＜code＞不是，浏览器使用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