我有一个用webpack-simple选项生成的Vue应用程序.我试图向https://api.forismatic.com/api/1.0/?method=getQuote&format=json&lang=en发出GET请求，但我得到了错误:
无法加载XMLHttpRequest
我正在使用vue资源，并添加了:
Vue.http.headers.common['Access-Control-Allow-Origin'] = '*'
这没有效果.
我还在webpack.config.js中的devServer选项中添加了这一点:
devServer: {
historyApiFallback: true,
noInfo: true,
headers: {
"Access-Control-Allow-Origin": "*"
}
}
这也不能解决问题；错误信息保持不变.
如何着手解决这个问题？
Access-Control-Allow-Origin是请求必须发送到的服务器的response头.
所有其他Access-Control-Allow-*个报头都是服务器要发送的响应报头.
如果你不控制你的请求被发送到的服务器，而响应的问题只是缺少Access-Control-Allow-Origin个头或其他Access-Control-Allow-*个头，你仍然可以通过CORS代理发出请求来工作.
您可以使用https://github.com/Rob--W/cors-anywhere/中的代码轻松运行自己的代理
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/.
现在，用代理的URL作为请求URL的前缀:
https://cryptic-headland-94862.herokuapp.com/https://example.com
将代理URL添加为前缀会导致通过代理发出请求，这:
https://example.com.https://example.com的回复.Access-Control-Allow-Origin标题添加到响应中.然后浏览器允许前端代码访问响应，因为浏览器看到的是带有Access-Control-Allow-Origin响应头的响应.
即使请求是触发浏览器执行CORS preflight OPTIONS请求的请求，这也能起作用，因为在这种情况下，代理还会发回Access-Control-Allow-Headers和Access-Control-Allow-Methods报头，以使preflight成功.
如果你的前端代码将Access-Control-Allow-Origin个头或其他Access-Control-Allow-*个头添加到请求中，请删除该代码——因为添加这些请求头的唯一效果是，你触发浏览器发送a CORS preflight OPTIONS request个请求，而不是代码中实际的GET或POST个请求.