当http:// localhost是起源时致命的CORS

Question

即使我使用适当的头设置服务器(nginx/node.js),我仍然遇到这个CORS问题.

我可以在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 cannot load http://stackoverflow.com/. Origin http://localhost is not allowed by Access-Control-Allow-Origin.

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

Answer 1

Chrome 不支持localhost for CORS请求(自2010年以来的一个漏洞).

要解决这个问题,您可以使用类似的域lvh.me(指向127.0.0.1,就像localhost一样)或者使用--disable-web-security标志启动chrome (假设您只是在测试).

Answer 2

根据Per @ Beau的回答,Chrome不支持localhost 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.

请注意,扩展名默认过滤所有网址.这可能会破坏一些网站(例如:Dropbox).我已将其更改为仅使用以下URL过滤器过滤localhost URL

*://localhost:*/*

Answer 3

没有一个扩展对我有用，所以我安装了一个简单的本地代理。在我的情况下https://www.npmjs.com/package/local-cors-proxy 这是一个 2 分钟的设置：

（来自他们的网站）

npm install -g local-cors-proxy

我们要请求的具有 CORS 问题的 API 端点： https://www.yourdomain.ie/movies/list

启动代理： lcp --proxyUrl https://www.yourdomain.ie

然后在您的客户端代码中，新的 API 端点： http://localhost:8010/proxy/movies/list

对我来说就像一个魅力：你的应用程序调用代理，代理调用服务器。零 CORS 问题。

Answer 4

真正的问题是,如果我们-Allow-为所有请求(OPTIONS&POST)设置,Chrome将取消它.以下代码适用于POST使用Chrome的LocalHost

<?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);
} 
?>

Answer 5

Chrome 将使用来自localhost源的CORS 发出请求。这不是 Chrome 的问题。

您无法加载的原因http://stackoverflow.com是Access-Control-Allow-Origin标题不允许您的localhost来源。

Answer 6

同意！应在服务器端启用 CORS 以从根本上解决问题。然而...

对我来说，情况是：

我非常想使用客户端提供的 REST API 在本地测试我的前端（React/Angular/VUE）代码，而无法访问服务器配置。

仅用于测试

在尝试了上述所有步骤但不起作用后，我被迫禁用 Chrome 上的网络安全和站点隔离试验以及指定用户数据目录（尝试跳过此操作，但不起作用）。

对于 Windows

cd C:\Program Files\Google\Chrome\Application

禁用网络安全和站点隔离试验

chrome.exe  --disable-site-isolation-trials --disable-web-security --user-data-dir="PATH_TO_PROJECT_DIRECTORY"

这终于成功了！希望这可以帮助！

Answer 7

Chrome 确实允许在本地主机上使用 CORS，我让它与 AWS API gateway/lambda 一起使用。发送 http 请求时查看开发人员工具中的网络选项卡非常有帮助。我的问题是我的 lambda 函数不处理预检 OPTIONS 请求，只处理 POST 和 GET。我通过接受 OPTIONS 请求并确保从 API 返回以下标头解决了该问题：

• Access-Control-Allow-Origin: '*' (或网站域名)
• 访问控制允许方法：“POST、GET、OPTIONS”
  • 这是预检响应，告诉 chrome 我们现在可以发送 POST/GET 请求
• 访问控制允许标头：“内容类型”
  • 不确定这是否有必要，但它告诉 chrome 该请求可以包含 Content-Type 标头

需要注意的重要一点是浏览器发送 2 组标头。

1. OPTIONS 标头包括
   • access-control-request-method: 'POST' （或您请求的任何 http 方法）
   • origin: 'http://localhost:3000' (网站域名)
   • Referer: 'http://localhost:3000/' （我相信这是完整的网站路径）
   • 秒获取模式：'cors'
   • sec-fetch-site: '跨站点'

如果对请求 1 的响应是 200 代码并且响应标头包含： 'access-control-allow-methods': 'POST' （或请求中的任何 access-control-request-method），

2. 实际请求，例如：POST 标头，其中包括
   • 内容类型：'应用程序/json'
   • 出处：同上
   • 参考者：同上

还有更多标题，但我认为这些是最重要的。

Answer 8

快速而肮脏的 Chrome 扩展修复：

Moesif Orign 和 CORS 转换器

但是，Chrome 确实支持来自本地主机的跨源请求。确保为Access-Control-Allow-Originfor添加标头localhost。

Answer 9

我认为我对此的解决方案可能是最简单的。在我的开发机器上，我在我的主机文件中添加了一个类似于http://myfakedomain.notarealtld的假域名，并将其设置为 127.0.0.1。然后我更改了服务器的 CORS 配置（在我的情况下是 S3 存储桶）以允许该域。这样我就可以在 localhost 上使用 Chrome，而且效果很好。

确保您的 CORS 配置考虑了带有端口的整个主机名，即。http://myfakedomain.notarealtld:3000

您可以在 Linux、Mac 和 Windows 上轻松修改您的主机文件。