为什么我的 http://localhost CORS 源不起作用？

javascript html xmlhttprequest cors xmlhttprequest-level2

2022-08-30 00:26:45

我陷入了这个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/。访问控制-允许-源不允许源 http://localhost。

我怀疑这是客户端脚本中的问题，而不是服务器配置...

答案 1

Chrome 不支持 CORS 请求的本地主机（2010 年打开的一个错误，在 2014 年标记为 WontFix）。

要解决此问题，您可以使用类似域（指向127.0.0.1，就像localhost一样）或使用标志启动chrome（假设您只是在测试）。localho.st--disable-web-security

答案 2

根据@Beau的答案，Chrome不支持localhost CORS请求，并且在这个方向上不太可能有任何变化。

我使用允许-控制-允许-起源：*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:*/*