即使在客户端设置Access-Control-Allow-Origin后，CORS错误 [英] CORS error even after setting Access-Control-Allow-Origin on client side

问题描述

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

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。因此，不允许
访问源' http://127.0.0.1:8080 。

我正在使用vue-resource并添加：

I am using vue-resource and have added:

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

这没有效果。

我还在 webpack.config.js devServer 选项中添加了此选项c $ c>：

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.

但是 https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en 不会不会发送 Access-Control-Allow-Origin 标头-因此，您需要通过代理发出请求。为此，请更改您的前端JavaScript代码以改为使用以下URL：

But https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en doesn’t send the Access-Control-Allow-Origin header — so you need to instead make the request through a proxy. Do that by changing your frontend JavaScript code to instead use this URL:

https://cors-anywhere.herokuapp.com/https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en

尝试一下，您的前端代码将按预期工作。但是请确保首先删除此内容：

Try that and your frontend code will work as expected. But make sure you first also remove this:

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

正在添加 Access-Control-Allow- request 的Origin 头，作为请求头。但是如上所述， Access-Control-Allow-Origin 是 response 标头。因此，向请求添加 Access-Control-Allow-Origin 所具有的唯一效果是触发浏览器发送 CORS预检 OPTIONS 请求而不是发送您的 GET 。

That is adding the Access-Control-Allow-Origin header to the request, as a request header. But as mentioned above, Access-Control-Allow-Origin is a response header. So the only effect you’re having by adding Access-Control-Allow-Origin to the request is that you’re triggering your browser to send a CORS preflight OPTIONS request rather than sending your GET.

顺便说一句，您也可以删除此内容：

And incidentally you can also remove this:

headers: {
  "Access-Control-Allow-Origin": "*"
}

似乎要做的就是添加 Access-Control-Allow-Origin 来自您自己的服务器后端的响应的响应标头。但是您的前端代码发出的请求不会发送到您自己的服务器后端，而是发送到 https://api.forismatic.com/ 。

All that seems to be doing is to add the Access-Control-Allow-Origin response header to responses from your own server backend. But the request your frontend code is making isn’t going to your own server backend—instead it’s going to https://api.forismatic.com/.

无论如何，https://cors-anywhere.herokuapp.com/https://api.forismatic.com/… URL将导致请求转到 https://cors-anywhere.herokuapp.com ，这是一个开放式/公共CORS代理，可将请求发送至 https：//api.forismatic.com/api/1.0/？method = getQuote ... 。

Anyway, the https://cors-anywhere.herokuapp.com/https://api.forismatic.com/… URL will cause the request to go to https://cors-anywhere.herokuapp.com, a open/public CORS proxy which sends the request on to https://api.forismatic.com/api/1.0/?method=getQuote….

当该代理获得响应时，它将使用它并向其添加 Access-Control-Allow-Origin 响应标头，然后将其传递回您的请求前端代码作为响应。

And when that proxy gets the response, it’ll take it and add the Access-Control-Allow-Origin response header to it and then pass that back to your requesting frontend code as the response.

浏览器会看到带有 Access-Control-Allow-Origin 响应标头的响应，因此浏览器将显示错误消息显示您现在已离开，浏览器允许您的前端JavaScript代码访问响应。

That response with the Access-Control-Allow-Origin response header is what the browser sees, so the error message the browser is showing you now goes away, and the browser allows your frontend JavaScript code to access the response.

或使用 https://github.com/Rob--W/cors-anywhere/ 或类似的设置您自己的代理。

Or use the code from https://github.com/Rob--W/cors-anywhere/ or such to set up your own proxy.

您需要代理的原因是 https://api.forismatic.com/api/1.0/?method= getQuote…本身不会发送 Access-Control-Allow-Origin 响应标头，因此您的浏览器将拒绝让您的前端JavaScript代码访问

The reason you need a proxy is, https://api.forismatic.com/api/1.0/?method=getQuote… itself doesn’t send the Access-Control-Allow-Origin response header, so your browser will refuse to let your frontend JavaScript code access a response from that server cross-origin.

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS 具有更多详细信息。

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