Question

我有非常基本的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”标头。因此，不允许原点“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查询导致错误以及我如何解决它？

Answer 1

错误消息显示：

对预检请求的响应

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

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

上述任何一种情况都会触发预检。

XMLHttpRequest版本（没有设置HTTP标头）并不需要预检，所以不支持预检的服务器不是问题。

Answer 2

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

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

See MDN for more details on this

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

2 个答案: