我被这个CORS问题困住了,即使我用适当的头设置了服务器(nginx/node.js)。
我可以看到在Chrome网络窗格->响应头:
Access-Control-Allow-Origin:http://localhost
这应该能奏效。
下面是我现在用来测试的代码:
var xhr = new XMLHttpRequest();
xhr.onload = function() {
console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();
我得到
XMLHttpRequest无法加载http://stackoverflow.com/。Access-Control-Allow-Origin不允许Origin http://localhost。
我怀疑这是客户端脚本的问题,而不是服务器配置…
同意!应该在服务器端启用CORS以彻底解决问题。然而……
对我来说,情况是:
我非常想用客户端提供的REST API在本地测试我的前端(React/Angular/VUE)代码,而不能访问服务器配置。
只是为了测试
在尝试了上面所有的步骤都没有工作后,我被迫在chrome上禁用网络安全和站点隔离试验,并指定用户数据目录(尝试跳过这个,没有工作)。
对于Windows
cd C:\Program Files\Google\Chrome\Application
禁用web安全和站点隔离试验
chrome.exe --disable-site-isolation-trials --disable-web-security --user-data-dir="PATH_TO_PROJECT_DIRECTORY"
这终于起作用了!希望这能有所帮助!
Chrome确实允许本地主机上的CORS,我让它与AWS API网关/lambda一起工作。在发送http请求时,查看开发人员工具中的network选项卡非常有用。我的问题是我的lambda函数没有处理preflight OPTIONS请求,只有POST和GET。我通过接受OPTIONS请求解决了这个问题,并确保从我的API返回以下头:
Access-Control-Allow-Origin: '*'(或网站域名)
Access-Control-Allow-Methods: 'POST, GET, OPTIONS'
这是飞行前的响应,告诉chrome,我们现在可以发送一个POST/GET请求
Access-Control-Allow-Headers:“内容类型”
不确定这是否是必要的,但它告诉chrome,请求可以包括一个内容类型头
需要注意的重要一点是浏览器会发送两组报头。
OPTIONS头文件,包括
access-control-request-method: 'POST'(或任何你正在请求的http方法)
来源:“http://localhost:3000”(网站域名)
推荐人:“http://localhost:3000/”(我相信这是完整的网站路径)
sec-fetch-mode:“歌珥”
sec-fetch-site:“跨站点”
如果请求1的响应是200码,并且响应头包含:
'access-control-allow-methods': 'POST'(或者请求中的access-control-request-method),
实际请求,例如:POST头,其中包括
内容类型:“application / json”
产地:同上
推荐人:同上
还有更多的标题,但我认为这些是最重要的。