为什么 axios 会导致 Access-Control-Allow-Origin 错误答案

【问题标题】：Why axios cause Access-Control-Allow-Origin error为什么 axios 会导致 Access-Control-Allow-Origin 错误
【发布时间】：2018-11-08 12:42:46
【问题描述】：

我有非常基本的 axios 代码：

axios.get(GEO_IP)
.then(res => res)
.catch(err => err);

另外，我设置了下一个 axios 默认值：

axios.defaults.headers["content-type"] = "application/json";
axios.defaults.headers.common.authorization = `Bearer ${token}`;

此公共 API 不需要授权令牌。当我尝试使用 axios.get 触发查询时，我在控制台中看到下一个错误：

无法加载https://ipfind.co/me?auth=8964b0f3-4da1-46eb-bcb4-07a9614a6946：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。 Origin 'http://localhost:3000' 因此不允许访问。

当我使用原生 XMLHttpRequest 重写 axios 时：

new Promise((resolve, reject) => {
const http = new XMLHttpRequest();
http.onreadystatechange = function() {
  if (this.readyState === 4 && this.status === 200) {
    // result
  }
};
http.open("GET", GEO_IP, true);
http.send();
});`

一切正常，没有任何错误。有人可以澄清为什么 axios 查询会导致错误以及如何修复它吗？

【问题讨论】：

同源策略，当您请求不同域时会发生这种情况。 developer.mozilla.org/en-US/docs/Web/HTTP/CORS
@epascarello — 那么为什么 XMLHttpRequest 不会出现问题呢？

标签： javascript reactjs xmlhttprequest axios

【解决方案1】：

这意味着当您的服务器为 GET 请求发送正确的 CORS 标头时，它不适用于 axios 作为预检请求的一部分发送的 OPTIONS 请求。

有些请求不需要预检请求。但我猜 axios 总是发送一个。

See MDN for more details on this.

【讨论】：

“但我猜 axios 总是发送一个。” — 它没有。
你说得对，我没有注意到 axios 发送的请求与 XHR 请求不同。

【解决方案2】：

错误信息说：

对预检请求的响应

这与axios无关。您正在尝试发送不同的请求。当您使用 axios 时，您正在以需要预检的方式设置请求。

axios.defaults.headers["content-type"] = "application/json";
axios.defaults.headers.common.authorization = `Bearer ${token}`;

以上任何一种都会触发预检。

XMLHttpRequest 版本（不设置 HTTP 标头）不需要预检，因此不支持预检的服务器不是问题。

【讨论】：