Axios - 请求的资源上没有“Access-Control-Allow-Origin”标头[重复]

Posted 2023-02-22

【中文标题】Axios - 请求的资源上没有“Access-Control-Allow-Origin”标头[重复]

【英文标题】：Axios - No 'Access-Control-Allow-Origin' header is present on the requested resource [duplicate]

【发布时间】：2021-09-25 12:27:45

【问题描述】：

我正在尝试使用 VueJS 和 axios 从端点获取数据，但我在此代码中不断收到以下 CORS 错误。

  axios
    .get(url, 
      headers: 
        "Access-Control-Allow-Origin": "*",
      ,
    )
    .then((response) => 
      this.data = response.data;
    );

从源“http://localhost:8081”访问 [url] 处的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：否“Access-Control-Allow-Origin”请求的资源上存在标头。

我查看了多个答案，但我看到的唯一解决方案是使用 Chrome 扩展程序或更改服务器的配置，我无权访问。有没有办法专门通过前端解决这个问题？

【问题讨论】：

您正在客户端上设置Access-Control-Allow-Origin 标头。它需要在您要连接的服务器上设置。

如果你不能以任何方式访问服务器，唯一的方法（我认为）是让你的前端代理服务器到你前端主机名上的本地路径（例如 localhot:8081 将被代理到localhost:8080/server 或类似）。如果您使用的是 webpack，则支持开箱即用。

【参考方案1】：

您可以使用 CORS 代理，例如 CORS anywhere:

  axios
    .get("https://cors-anywhere.herokuapp.com/" + url)
    .then((response) => 
      this.data = response.data;
    );

但是，这对于生产来说不是一个好的解决方案，因为它依赖外部服务来处理您的请求，这可能会导致以后出现问题。