当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 does not support localhost for CORS requests（2010年开放的一个错误，2014年标记为WontFix）。

要解决这个问题，你可以使用像lvh.me这样的域名（就像localhost一样指向127.0.0.1）或者使用--disable-web-security标志启动chrome（假设你只是在测试）。

Answer 2

根据Per @ Beau的回答，Chrome不支持localhost CORS请求，并且此方向不太可能发生任何变化。

我使用Allow-Control-Allow-Origin: * Chrome Extension解决这个问题。扩展将为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>

source code is published on Github。

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

*://localhost:*/*

Answer 3

真正的问题是，如果我们为所有请求（-Allow-和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);
} 
?>