我有一个生成的vue应用程序 webpack-simple 选项我正在努力做一个决定 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 . 对飞行前请求的响应未通过访问控制检查：请求的资源上不存在“访问控制允许来源”标头。起源' http://127.0.0.1:8080 因此，不允许访问。
我正在使用vue资源，并添加了：
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'这没有效果。
我还在 devServer 中的选项 webpack.config.js :
devServer: {
historyApiFallback: true,
noInfo: true,
headers: {
"Access-Control-Allow-Origin": "*"
}
}这也不能解决问题；错误消息保持不变。
如何着手解决这个问题？
1条答案
按热度按时间nxowjjhe1#
Access-Control-Allow-Origin是请求必须发送到的服务器的响应头。以及所有其他
Access-Control-Allow-*标头是服务器要发送的响应标头。如果您不控制您的请求被发送到的服务器，那么来自该服务器的响应的问题只是缺少
Access-Control-Allow-Origin标题或其他Access-Control-Allow-*头您仍然可以通过cors代理发出请求来完成工作。您可以使用中的代码轻松运行自己的代理https://github.com/rob--w/cors-anywhere/.
您还可以使用5个命令，在2-3分钟内轻松地将自己的代理部署到heroku：
运行这些命令后，您将在运行自己的cors anywhere服务器，例如。，
https://cryptic-headland-94862.herokuapp.com/.现在，将代理的url作为请求url的前缀：
添加代理url作为前缀会导致通过代理发出请求，然后：
将请求转发给
https://example.com.接收来自的响应
https://example.com.添加
Access-Control-Allow-Origin响应的标题。将带有添加的头的响应传递回请求的前端代码。
然后，浏览器允许前端代码访问响应，因为该响应具有
Access-Control-Allow-Origin响应标题是浏览器看到的内容。即使请求触发浏览器进行cors预飞行，这种方法仍然有效
OPTIONS请求，因为在这种情况下，代理还会发回Access-Control-Allow-Headers及Access-Control-Allow-Methods使飞行前成功所需的标题。如果你有前端代码可以添加
Access-Control-Allow-Origin标题或其他Access-Control-Allow-*在客户端，删除该代码，因为添加这些请求头的唯一效果是触发浏览器发送cors预飞行OPTIONS请求而不是实际的请求GET或POST在代码中输入请求。