Webpack 即使在客户端设置访问控制允许源或其他访问控制允许-*头之后，CORS错误

我使用

webpack simple

选项生成了一个Vue应用程序。我正试图向

https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en

但我得到了一个错误：

无法加载XMLHttpRequest

https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en

。 对飞行前请求的响应未通过访问控制检查：否 “Access Control Allow Origin”标头出现在请求的服务器上 资源。来源“

http://127.0.0.1:8080因此不允许使用“

” 进入

我正在使用vue资源，并添加了：

Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'

这没有效果

我还在

webpack.config.js

中的

devServer

选项中添加了这个：

devServer: {
  historyApiFallback: true,
  noInfo: true,
  headers: {
    "Access-Control-Allow-Origin": "*"
  }
}

这也不能解决问题；错误消息保持不变

---

如何着手解决此问题？

访问控制允许源站

是请求到达的服务器必须发送的响应头

所有其他

访问控制允许-*

头都是服务器要发送的响应头

如果您不控制您的请求发送到的服务器，而该服务器的响应问题只是缺少

Access control Allow Origin

头或其他

Access control Allow-*

头，那么您仍然可以通过CORS代理发出请求，使事情正常进行

您可以使用中的代码轻松运行自己的代理。
您还可以使用5个命令，在2-3分钟内轻松地将自己的代理部署到Heroku：

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

在运行这些命令之后，您将在运行自己的CORS Anywhere服务器，例如，

https://cryptic-headland-94862.herokuapp.com/

现在，将代理的URL作为请求URL的前缀：

https://cryptic-headland-94862.herokuapp.com/https://example.com

添加代理URL作为前缀会导致通过代理发出请求，然后：

将请求转发到

https://example.com

从

https://example.com

将

访问控制允许原点

标题添加到响应中

将带有添加的头的响应传递回请求的前端代码

然后浏览器允许前端代码访问响应，因为带有

访问控制允许原点的响应是浏览器看到的

即使请求触发浏览器执行CORS飞行前
选项
请求，这也会起作用，因为在这种情况下，代理还会发回飞行前成功所需的
访问控制允许标头
和
访问控制允许方法
标头

如果前端代码正在向客户端的请求添加
Access Control Allow Origin
头或其他
Access Control Allow-*
头，请删除该代码，因为添加这些请求头的唯一效果是，您正在触发浏览器发送而不是在代码中实际的
GET
或
POST
请求。
我注意到
cors anywhere.herokuapp.com
是一个不错的临时解决方案，但不是您希望在生产中使用的解决方案，因为它可能涉及通过其他人的应用程序传递敏感数据。@ceejayoz是真的，但在这种情况下，请求是一个没有凭据的简单GET，被发送到一个似乎是公共可用的服务，该服务返回随机引用。因此，在这种情况下，代理只是一种绕过这一事实的方法，即该服务的提供者不必费心将Access Control Allow Origin响应头添加到响应本身。似乎没有什么好的理由让他们不能…