使用 reactjs 和节点网络服务器的 CORS 策略阻止了从源'http://localhost:3000'获取'http://localhost:5000/login'的访问

Question

完全错误

访问"获取http://localhost:5000/login'来自原点'http://localhost:3000'已被CORS策略阻止：对飞行前请求的响应未通过访问控制检查：请求的资源上不存在"access control Allow Origin"标头。如果不透明的响应符合您的需求，请设置

当我尝试在reactjs中发出请求时，我会遇到这个错误，但例如，我对curl没有问题。

卷曲请求

我也尝试过用"；访问控制允许来源：*"；

Answer 1

这是由于Node服务器上的CORS策略，因为客户端和服务器都在不同的端口上运行，所以它们被认为是不同的"起源"；。CORS是一种指示允许访问服务器上资源的源的机制。这有助于阻止来自未知来源的对API的不必要请求，并且可以在MDN上找到更多信息。

一个选项是从服务器中设置CORS原点。如果你使用的是Express，你可以使用中间件设置原点：

app.use(cors({
origin: 'http://localhost:3000/'
}))

或者，如果你想手动操作：

app.use(() => (req, res, next) {
res.header("Access-Control-Allow-Origin", "http://localhost:3000/");
res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
next();
});

需要注意的是，当您部署应用程序时，需要更新此源以匹配主机地址，无论是静态IP还是域。因此，将其设置为环境变量会很有用。

此外，您可以在Reactpackage.json中设置一个代理，如下所示："proxy": "http://localhost:5000/"，但这在生产中不起作用。

Answer 2

我将其解释为您在端口3000上运行reach-webserver，在5000上运行节点后端侦听。

由于cors策略，您不能跨源(从域localhost:3000到域localhost:5000(发出请求。

头Access-Control-Allow-Origin: *应该由节点后端设置，但这是一个非常糟糕的解决方案。您应该向ypur-react包json添加一个代理密钥，它将把您的所有请求代理到另一台服务器。(参见https://create-react-app.dev/docs/proxying-api-requests-in-development/)