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

Question

我有一个使用webpack-simple 选项生成的 Vue 应用程序。我正在尝试向https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en 发出GET 请求，但出现错误：

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'] = '*'

这没有任何作用。

我还在webpack.config.js 的devServer 选项中添加了这个：

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

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

如何解决这个问题？

Answer 1

Access-Control-Allow-Origin 是一个 response 标头，请求到达的服务器必须发送。

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

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

您可以使用https://github.com/Rob--W/cors-anywhere/ 中的代码轻松运行自己的代理。
您还可以在 2-3 分钟内轻松地将自己的代理部署到 Heroku，只需 5 个命令：

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 和 Access-Control-Allow-Methods 标头。

如果您的前端代码将 Access-Control-Allow-Origin 标头或其他 Access-Control-Allow-* 标头添加到请求中，请删除该代码 - 因为添加这些请求标头的唯一效果是，您会触发浏览器在您的代码中发送 a CORS preflight OPTIONS request 而不是实际的 GET 或 POST 请求。