为啥 axios 会导致 Access-Control-Allow-Origin 错误

Posted 2023-02-22

【中文标题】为啥 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 不会出现问题呢？

【参考方案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 标头）不需要预检，因此不支持预检的服务器不是问题。