即使在客户端设置了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=zh_CN .对预检请求的响应未通过访问控制检查:否请求中存在"Access-Control-Allow-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 是请求发送到的服务器必须发送的 response 标头

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 from that server 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/.
您还可以使用5个命令在2-3分钟内轻松地将自己的代理部署到Heroku:

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 then:

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-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-* 标头添加到客户端请求的前端代码一侧，删除该代码-因为添加这些请求标头的唯一作用是触发浏览器发送

And if you have frontend code that’s adding the Access-Control-Allow-Origin header or other Access-Control-Allow-* headers to the request on the client side, 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屋！