Javascript 为什么我的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。访问控制不允许原点允许原点

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

Chrome（2010年出现的一个bug，2014年标记为WontFix）

---

为了解决这个问题，你可以使用像

localho.st

（它指向127.0.0.1，就像localhost一样）这样的域，或者使用

--禁用web安全性

标志启动chrome（假设你只是在测试）。

真正的问题是，如果我们为所有请求设置

-Allow-

（

选项

&

发布

），Chrome将取消它。 以下代码适用于我使用Chrome将

POST

发布到本地主机

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

---

根据@Beau的回答，Chrome不支持本地主机CORS请求，在这方面不太可能有任何改变

我用这个方法来解决这个问题。扩展将为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>

---

Chrome可以从

localhost

origin使用COR发出请求。这不是Chrome的问题

---

无法加载

http://stackoverflow.com

是因为

访问控制允许源站

标题不允许您的

本地主机

源站。

快速脏Chrome扩展修复：

---

然而，Chrome确实支持来自本地主机的跨源请求。确保为

Access Control Allow Origin

添加头

localhost

我决定不碰头，而是在服务器端进行重定向，效果非常好

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

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

如果是角度，我将使用该配置：

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

我更喜欢在serve命令中使用代理，但您也可以将此配置放在angular.json中，如下所示：

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

另见：

---

没有一个扩展适合我，所以我安装了一个简单的本地代理。就我而言 这是一个2分钟的设置：

（从他们的网站）

我们要请求的具有CORS问题的API终结点：

https://www.yourdomain.ie/movies/list

启动代理：

lcp--proxyUrlhttps://www.yourdomain.ie

然后在客户端代码中，新的API端点：

http://localhost:8010/proxy/movies/list

---

这对我来说很有吸引力：你的应用程序调用代理，代理调用服务器。零CORS问题。

解决方案是安装一个可提升Chrome模块的扩展，例如：

访问控制允许来源-取消阻止（）。

同意！应该在服务器端启用CORS以彻底解决问题。然而。。。 对我来说，情况是： 我非常想用客户端提供的RESTAPI在本地测试我的前端（React/Angular/VUE）代码，而不需要访问服务器配置

只是为了测试 在尝试了上述所有不起作用的步骤后，我被迫在chrome上禁用web安全和站点隔离试验，并指定用户数据目录（尝试跳过此步骤，但不起作用）

窗户 禁用web安全和站点隔离测试

---

这终于奏效了！希望这有帮助

我认为我的解决方案可能是最简单的。在我的开发机器上，我在主机文件中添加了一个类似的假域，并将其设置为127.0.0.1。然后，我更改了服务器的CORS配置（在我的示例中是S3 bucket）以允许该域。这样我就可以在本地主机上使用Chrome，而且效果非常好

确保您的CORS配置考虑了端口的整个主机名，即

---

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

否，stackoverflow.com需要设置此标头，而不是您：十,。否则，同源点策略会是什么。请尝试访问您设置的服务器，而不是堆栈溢出。；）啊！当我的源代码是localhost时，是否有方法告诉chrome（或其他浏览器）即使缺少标题也能获取资源？请在chrome（20.0.1132.57，Windows 7）中运行您的代码，效果很好。如果您使用的是带有端口的localhost，这个答案对我有效。@Greensuise-它不会发布到localhost。问题出在本地主机上。这个bug是无效的（并且被标记为-）。是正确的，将这些头添加到localhost不会神奇地授予您访问所有其他站点的权限。需要为远程站点提供这些标题。其他选项：编辑主机文件，使本地[mysite].com指向127.0.0.1，然后使您的CORS文件允许*.mysite]。comI在FireFox中遇到同样的问题。我只能勉强做到！不错的帖子，太棒了！：）请参阅@Molomby下面的评论“Chrome 100%支持本地主机之间的跨源请求…”OP使用的是nginx/node.js。不是PHPIf如果您阅读了@beau链接的问题，您将看到Chrome 100%支持本地主机的跨源请求。由于无法复制，该期于2014年结束。该线程中的其他噪音是那些配置错误的非源服务器的人（与这里的原始问题一样）。在chromeWorking链接上对我很有吸引力：此扩展不适用于

访问控制允许凭据：true

，因为它将

访问控制允许来源设置为
*
，同时具有
true
和
*
被浏览器阻止。如果使用凭据为true，则必须使用非通配符源。我推荐Moesif Origination和CORS Changer Extension，它允许
$ ng serve -o --proxy-config=proxy.conf.json

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

npm install -g local-cors-proxy

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

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