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

即使我为服务器（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无法加载http://stackoverflow.com/。Access-Control-Allow-Origin不允许使用原始http：// localhost。

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

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

为了解决这个问题，您可以使用一个类似的域lvh.me（就像localhost一样指向127.0.0.1），或者使用--disable-web-securityflag 开头chrome （假设您只是在测试）。

根据@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。

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

*://localhost:*/*

真正的问题是，如果我们-Allow-为所有请求（OPTIONS＆POST）设置，Chrome将取消它。以下代码对我适用于POSTChrome的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);
} 
?>

Chrome可以localhost很好地通过来源向CORS发出请求。Chrome没问题。

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

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

Moesif Orign和CORS Changer

但是，Chrome确实支持来自本地主机的跨域请求。请务必添加一个报头Access-Control-Allow-Origin的localhost。

这些扩展都不适合我，因此我安装了一个简单的本地代理。就我而言，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问题。

我决定不碰标题，而是在服务器端进行重定向，它像魔咒一样醒来。

下面的示例适用于当前版本的Angular（当前为9），也可能适用于使用webpacks DevServer的任何其他框架。但是我认为相同的原则在其他后端也适用。

因此，我在文件proxy.conf.json中使用以下配置：

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

在Angular的情况下，我使用该配置：

$ ng serve -o --proxy-config=proxy.conf.json

我更喜欢在serve命令中使用proxy，但是您也可以像下面这样将配置放入angular.json：

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

也可以看看：

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy