即使我为服务器（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不支持 localhost 的 CORS 请求（2010 年发现的错误，2014 年标记为 WontFix）。
为了解决这个问题，您可以使用类似的域localho.st（它指向 127.0.0.1，就像 localhost 一样）或使用--disable-web-security标志启动 chrome（假设您只是在测试）。
根据@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>
请注意，扩展默认过滤所有 URL。这可能会破坏某些网站（例如：Dropbox）。我已将其更改为仅使用以下 URL 过滤器过滤localhost 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 问题。
真正的问题是，如果我们-Allow-为所有请求（OPTIONS& POST）设置，Chrome 将取消它。以下代码适用于POST带有 Chrome 的 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来源。
我非常想使用客户端提供的 REST API 在本地测试我的前端（React/Angular/VUE）代码，而无法访问服务器配置。
在尝试了上述所有不起作用的步骤后，我被迫禁用了 chrome 上的 Web 安全和站点隔离试验，同时指定了用户数据目录（尝试跳过这个，没有用）。
cd C:\Program Files\Google\Chrome\Application
chrome.exe --disable-site-isolation-trials --disable-web-security --user-data-dir="PATH_TO_PROJECT_DIRECTORY"
这终于奏效了！希望这可以帮助！
我认为我的解决方案可能是最简单的。在我的开发机器上，我在主机文件中添加了一个类似于http://myfakedomain.notarealtld的假域，并将其设置为 127.0.0.1。然后我更改了服务器的 CORS 配置（在我的情况下是 S3 存储桶）以允许该域。这样我就可以在 localhost 上使用 Chrome 并且效果很好。
确保您的 CORS 配置考虑了带有端口的整个主机名，即。http://myfakedomain.notarealtld:3000
您可以在 Linux、Mac 和 Windows 上轻松修改主机文件。
快速而肮脏的 Chrome 扩展修复：
但是，Chrome 确实支持来自 localhost 的跨域请求。确保为Access-Control-Allow-Originfor添加标题localhost。
Chrome 确实允许本地主机上的 CORS，我使它与 AWS API 网关/lambda 一起工作。在发送 http 请求时查看开发人员工具中的网络选项卡非常有帮助。我的问题是我的 lambda 函数没有处理预检 OPTIONS 请求，只有 POST 和 GET。我通过接受 OPTIONS 请求并确保从我的 API 返回以下标头解决了这个问题：
需要注意的重要一点是浏览器发送了 2 组标头。
如果对请求 1 的响应是 200 代码并且响应标头包含： 'access-control-allow-methods': 'POST' （或请求中的任何访问控制请求方法），
还有更多的标题，但我认为这些是最重要的。
我决定不触摸标题并在服务器端进行重定向，它就像一个魅力。
下面的示例适用于当前版本的 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 )。