我被这个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。
我怀疑这是客户端脚本的问题，而不是服务器配置…
当前回答
这些扩展都不适合我，所以我安装了一个简单的本地代理。在我的情况下https://www.npmjs.com/package/local-cors-proxy 这是一个2分钟的设置:
(来自他们的网站)
NPM install -g local-cors-proxy API端点，我们想请求有CORS问题: https://www.yourdomain.ie/movies/list 启动代理:lcp——proxyUrl https://www.yourdomain.ie 然后在客户端代码中，添加新的API端点: http://localhost:8010/proxy/movies/list
这对我来说很有吸引力:你的应用程序调用代理，代理调用服务器。零CORS问题。
其他回答
Chrome不支持CORS请求的本地主机(2010年开放的bug, 2014年标记为WontFix)。
要解决这个问题，可以使用localho这样的域。St(和localhost一样指向127.0.0.1)或者在启动chrome时使用——disable-web-security标志(假设你只是在测试)。
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” 产地:同上 推荐人:同上
还有更多的标题，但我认为这些是最重要的。
真正的问题是，如果我们设置-允许-所有请求(OPTIONS & POST)， Chrome将取消它。 下面的代码为我POST到LocalHost与Chrome
<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
//header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
header("Access-Control-Allow-Origin: *");
header('Access-Control-Allow-Credentials: true');
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
}
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
header("Access-Control-Allow-Methods: GET, POST, OPTIONS");
if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");
exit(0);
}
?>
我想我的解决办法可能是最简单的。在我的开发机器上，我在hosts文件中添加了一个类似于http://myfakedomain.notarealtld的假域，并将其设置为127.0.0.1。然后我更改了服务器的CORS配置(在我的例子中是S3桶)以允许该域。这样我就可以在localhost上使用Chrome，它工作得很好。
确保您的CORS配置考虑到整个主机名与端口，即。http://myfakedomain.notarealtld:3000
您可以轻松地在Linux、Mac和Windows上修改主机文件。
根据@Beau的回答，Chrome不支持本地主机CORS请求，在这个方向上不太可能有任何变化。
我使用Allow-Control-Allow-Origin: * Chrome扩展来解决这个问题。扩展将为CORS添加必要的HTTP头:
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>
源代码发布在Github上。
注意，默认情况下扩展过滤所有url。这可能会破坏一些网站(例如:Dropbox)。我将其更改为仅使用以下URL过滤器过滤本地主机URL
*://localhost:*/*
