我被这个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。

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


当前回答

Chrome不支持CORS请求的本地主机(2010年开放的bug, 2014年标记为WontFix)。

要解决这个问题,可以使用localho这样的域。St(和localhost一样指向127.0.0.1)或者在启动chrome时使用——disable-web-security标志(假设你只是在测试)。

其他回答

真正的问题是,如果我们设置-允许-所有请求(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);
} 
?>

Chrome不支持CORS请求的本地主机(2010年开放的bug, 2014年标记为WontFix)。

要解决这个问题,可以使用localho这样的域。St(和localhost一样指向127.0.0.1)或者在启动chrome时使用——disable-web-security标志(假设你只是在测试)。

这些扩展都不适合我,所以我安装了一个简单的本地代理。在我的情况下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问题。

根据@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:*/*

快速和肮脏的Chrome扩展修复:

Moesif源& CORS变换器

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