在客户端设置Access-Control-Allow-Origin后,即使出现CORS错误

Question

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

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

那没有效果.

我还在以下devServer选项中添加了这个webpack.config.js:

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

这也不能解决问题; 错误消息保持不变.

如何解决这个问题？

Answer 1

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

但是https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en不发送Access-Control-Allow-Origin标题 - 所以你需要通过代理发出请求.通过将您的前端JavaScript代码更改为使用此URL来执行此操作:

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

试试这个,你的前端代码将按预期工作.但请确保您首先删除此:

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

即添加Access-Control-Allow-Origin报头添加到请求,作为请求报头.但如上所述,Access-Control-Allow-Origin是一个响应头.因此,通过添加Access-Control-Allow-Origin请求,您所拥有的唯一效果是您触发浏览器发送CORS预检OPTIONS请求而不是发送您的GET.

顺便说一句,你也可以删除这个:

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

似乎所做的只是将Access-Control-Allow-Origin响应头添加到您自己的服务器后端的响应中.但是你的前端代码所做的请求并没有进入你自己的服务器后端 - 相反它会发生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….

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

Access-Control-Allow-Origin响应头的响应是浏览器看到的,因此浏览器显示的错误消息现在消失了,浏览器允许您的前端JavaScript代码访问响应.

或者使用https://github.com/Rob--W/cors-anywhere/中的代码来设置您自己的代理.

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

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