即使在客户端设置 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
问题描述
我有一个使用 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.js
的 devServer
选项中添加了这个:
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:
- 将请求转发到
https://example.com
. - 从
https://example.com
接收响应. - 将
Access-Control-Allow-Origin
标头添加到响应中. - 将带有添加的标头的响应传递回请求前端代码.
- Forwards the request to
https://example.com
. - Receives the response from
https://example.com
. - Adds the
Access-Control-Allow-Origin
header to the response. - 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-Headers
和 Access-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
请求,而不是代码中实际的GET
或POST
请求.
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屋!