为什么我的 http://localhost CORS 源不起作用

Why does my http://localhost CORS origin not work?

本文关键字：CORS 不起作用 localhost 为什么 http 我的      更新时间：2023-09-26

即使我使用适当的标头设置了服务器（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/。访问控制-允许-源不允许源 http://localhost。

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

Chrome不支持

CORS请求的localhost（2010年打开的错误，2014年标记为WontFix）。

要解决此问题，您可以使用像 localho.st 这样的域（它像 localhost 一样指向 127.0.0.1）或使用 --disable-web-security 标志启动 chrome（假设您只是在测试）。

根据@Beau的回答，Chrome不支持本地主机CORS请求，并且不太可能朝这个方向做出任何改变。

我使用允许控制允许来源：* 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:*/*

没有一个扩展对我有用，所以我安装了一个简单的本地代理。就我而言 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 问题。

真正的问题是，如果我们为所有请求（OPTIONS & POST）设置-Allow- ，Chrome 将取消它。以下代码适用于我，POST到带有 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 会很好地使用来自localhost来源的 CORS 发出请求。 这不是Chrome的问题。

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

同意！应在服务器端启用 CORS 以彻底解决问题。然而。。。

对我来说，情况是：

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

仅用于测试

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

对于窗户

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

禁用 Web 安全和站点隔离试用

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

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

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

  • 访问控制允许来源："*"（或网站域）
  • 访问控制允许方法："发布、获取、选项"
    • 这是预检响应，告诉 Chrome 我们现在可以发送 POST/GET 请求
  • 访问控制允许标头："内容类型"
    • 不确定这是否必要，但它告诉 Chrome 请求可以包含内容类型标头

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

  1. 选项标头，其中包括
    • access-control-request-method："POST"（或您请求的任何 http 方法）
    • 来源："http://localhost:3000"（网站域名）
    • 推荐人："http://localhost:3000/"（我相信这是完整的网站路径）
    • 秒获取模式："CORS"
    • 秒获取站点："跨站点"

如果对请求 1 的响应是 200 代码，并且响应标头包含："访问控制-允许-方法"："POST"（或请求中的任何访问控制-请求-方法），

  1. 实际请求，例如：POST 标头，其中包括
    • 内容类型："应用程序/JSON"
    • 产地：同上
    • 推荐人：同上

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

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

Moesif Orign & CORS Changer

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

我认为

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

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

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

我决定不触摸标题并在服务器端进行重定向，它像一个魅力一样摇摆不定。

下面的示例适用于当前版本的 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 命令中使用代理，但您也可以像这样将此配置放入 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

解决方案是安装一个扩展程序来解除Chrome所做的阻止，例如：

访问控制 - 允许源 - 取消阻止 （https://add0n.com/access-control.html?version=0.1.5&type=install）。

相关文章：