本地主机上出现CORS错误，这正常吗？

Question

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

然后，我在端口3000上启动react服务器，并立即在控制台中获得错误：

CORS策略阻止了从http://localhost:8000/api/hero/http://localhost:3000对XMLHttpRequest的访问：请求的资源上不存在访问控制允许起源标头。

这对于本地主机设置正常吗？

Answer 1

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

Answer 2

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

在你的webpack.conf.js，添加

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

Answer 3

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

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