即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误 [英] CORS error even after setting Access-Control-Allow-Origin or other Access-Control-Allow-* headers on client side

查看:17
本文介绍了即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

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

I have a Vue application generated with webpack-simple option. I am trying to make a GET request to https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en but I get the error:

XMLHttpRequest 无法加载https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en.对预检请求的响应未通过访问控制检查:否请求中存在Access-Control-Allow-Origin"标头资源.Origin 'http://127.0.0.1:8080' 因此是不允许的访问.

XMLHttpRequest cannot load https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:8080' is therefore not allowed access.

我正在使用 vue-resource 并添加了:

I am using vue-resource and have added:

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

没有效果.

我还在 webpack.config.jsdevServer 选项中添加了这个:

I also added this in the devServer option in the webpack.config.js:

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

那也不能解决问题;错误信息保持不变.

That isn't solving the problem either; the error message remains the same.

如何解决这个问题?

推荐答案

Access-Control-Allow-Origin 是请求到达的服务器必须发送的响应标头.

Access-Control-Allow-Origin is a response header the server the request goes to must send.

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

And all other Access-Control-Allow-* headers are response headers for servers to send.

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

If you don’t control the server your request is sent to, and the problem with the response is just the lack of the Access-Control-Allow-Origin header or other Access-Control-Allow-* headers you can still get things to work—by making the request through a CORS proxy.

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

You can easily run your own proxy using code from https://github.com/Rob--W/cors-anywhere/.
You can also easily deploy your own proxy to Heroku in just 2-3 minutes, with 5 commands:

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/.

After running those commands, you’ll end up with your own CORS Anywhere server running at, e.g., https://cryptic-headland-94862.herokuapp.com/.

现在,为您的请求 URL 添加代理 URL 的前缀:

Now, prefix your request URL with the URL for your proxy:

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

将代理 URL 添加为前缀会导致请求通过您的代理发出,这:

Adding the proxy URL as a prefix causes the request to get made through your proxy, which:

  1. 将请求转发到 https://example.com.
  2. https://example.com 接收响应.
  3. Access-Control-Allow-Origin 标头添加到响应中.
  4. 将带有添加的标头的响应传递回请求前端代码.
  1. Forwards the request to https://example.com.
  2. Receives the response from https://example.com.
  3. Adds the Access-Control-Allow-Origin header to the response.
  4. Passes that response, with that added header, back to the requesting frontend code.

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

The browser then allows the frontend code to access the response, because that response with the Access-Control-Allow-Origin response header is what the browser sees.

即使请求触发浏览器执行 CORS 预检 OPTIONS 请求,这也有效,因为在这种情况下,代理也会发回 Access-Control-Allow-HeadersAccess-Control-Allow-Methods 使预检成功所需的标头.

This works even if the request is one that triggers browsers to do a CORS preflight OPTIONS request, because in that case, the proxy also sends back the Access-Control-Allow-Headers and Access-Control-Allow-Methods headers needed to make the preflight successful.

如果您的前端代码将 Access-Control-Allow-Origin 标头或其他 Access-Control-Allow-* 标头添加到请求中,请将其删除代码 — 因为添加这些请求标头的唯一效果是触发浏览器发送 CORS 预检OPTIONS 请求,而不是代码中实际的GETPOST 请求.

And if you have frontend code that adds the Access-Control-Allow-Origin header or other Access-Control-Allow-* headers to the request, remove that code — because the only effect you have by adding those request headers is, you’re triggering your browser to send a CORS preflight OPTIONS request rather than the actual GET or POST request in your code.

这篇关于即使在客户端设置 Access-Control-Allow-Origin 或其他 Access-Control-Allow-* 标头后也出现 CORS 错误的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
相关文章
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆