即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后，仍会出现 CORS 错误

我有一个使用以下命令生成的 Vue 应用程序webpack-simple选项。我正在尝试做一个GET请求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-resource 并添加了：

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

那没有效果。

我还在devServer选项中的webpack.config.js:

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

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

如何着手解决这个问题？

Access-Control-Allow-Origin is a response响应服务器必须发送的标头。

以及所有其他Access-Control-Allow-*headers 是服务器发送的响应标头。

如果您不控制您的请求发送到的服务器，并且响应的问题只是缺少Access-Control-Allow-Origin标头或其他Access-Control-Allow-*您仍然可以通过 CORS 代理发出请求来使事情正常工作。

您可以使用以下代码轻松运行自己的代理https://github.com/Rob--W/cors-anywhere/ https://github.com/Rob--W/cors-anywhere/.
您还可以使用 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 作为前缀会导致请求通过您的代理发出，从而：

1. 将请求转发至https://example.com.
2. 收到来自的响应https://example.com.
3. 添加了Access-Control-Allow-Origin响应的标头。
4. 将带有添加的标头的响应传递回请求的前端代码。

然后浏览器允许前端代码访问响应，因为该响应带有Access-Control-Allow-Origin响应头是浏览器看到的。

即使请求是触发浏览器执行 CORS 预检的请求，此方法也有效OPTIONS请求，因为在这种情况下，代理也会发回Access-Control-Allow-Headers and Access-Control-Allow-Methods使预检成功所需的标头。

如果您有添加以下内容的前端代码Access-Control-Allow-Origin标头或其他Access-Control-Allow-*请求标头，请删除该代码 - 因为添加这些请求标头的唯一效果是触发浏览器发送CORS 预检OPTIONS request https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests而不是实际的GET or POST在您的代码中请求。