本地主机上的CORS错误，这是正常的吗？答案

【问题标题】：CORS error on localhost, Is that a normal?本地主机上的CORS错误，这是正常的吗？
【发布时间】：2019-11-09 14:07:53
【问题描述】：

我在本地连接到 mongo db 的端口 8000 上运行 node.js API。

然后我在端口 3000 上启动我的反应服务器，并立即在控制台中收到错误：

从源“http://localhost:3000”访问“http://localhost:8000/api/hero/”处的 XMLHttpRequest 已被 CORS 策略阻止：请求的资源上不存在“Access-Control-Allow-Origin”标头。

这对于 localhost 设置是否正常？

【问题讨论】：

Access-Control-Allow-Origin 阻止所有未在 node.js API developer.mozilla.org/en-US/docs/Web/HTTP/Headers/… 中定义的请求
跨域资源共享，当您从一个来源http://localhost:3000 向另一个来源http://localhost:8000/api/hero/ 请求一些数据时，如果您从http://localhost:8000/ 到http://localhost:8000/api/hero/ 有请求，则不会发生这种情况，因为它们是同源
@Arseniy-II，我无法运行 node.js 并在同一个端口上做出反应
我相信你可以。但你可能不会。它是由你决定。如果您希望拥有不同的端口，则需要按照 Janneck Lange 向您建议的那样在响应中添加跨域标头
你可以用谷歌搜索'node cors error'。你会有很多答案。这是第一个结果daveceddia.com/…

标签： node.js reactjs

【解决方案1】：

是的，因为 CORS 不以任何特定方式关心 localhost。相反，主机名和端口的组合 (!) 被用于在多方之间进行区分。

因此，对于 CORS，localhost:3000 与 localhost:8000 完全不同，所以，是的，这是正常的。

【讨论】：

【解决方案2】：

我猜 localhost:3000 正在运行 webpack 开发服务器？如果是这样，解决此问题的最简单方法是配置您的 webpack 开发服务器为您代理请求，因此无需在您自己的 express 服务器上添加 CORS 处理

在你的 webpack.conf.js 中，添加

devServer: {
  proxy: {
    '/api': 'http://localhost:8000'
  }
}

【讨论】：

【解决方案3】：

Access-Control-Allow-Origin 阻止所有未在您的 node.js API 中定义的请求

将以下行添加到您的 node.js 服务器。这允许您从每个 url 访问 api。

    this.app.use(function (req, res, next) {
        res.header("Access-Control-Allow-Origin", "*");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept, authorization");
        res.header("Access-Control-Allow-Methods", "GET, POST, OPTIONS, PUT, DELETE");
        next();
    });

【讨论】：

很好的答案，非常感谢