0

我已经构建并测试了我的 ReactJS 应用程序和 NodeJS 服务器。React 应用程序有一个登录表单，我想将其数据发送到服务器并从那里获取 Web 令牌。我正在使用 Axios 通过以下代码发送它：

  const sendData = (e) => {
    e.preventDefault();
    axios
      .post(url, data)
      .then((res) => console.log("Data send" + data))
      .catch((err) => console.log(err));
  };

但我在勇敢的浏览器中遇到了这个错误

从源“http://localhost:3001”访问“http://localhost:3000/api/v1/users/signup”的 XMLHttpRequest 已被 CORS 策略阻止：对预检请求的响应未通过访问控制检查：请求的资源上不存在“Access-Control-Allow-Origin”标头。

请告诉我这是最佳做法吗？如果是，如何摆脱这个错误，如果不是，更好的方法是什么？

4

2 回答 2

3

由于您的前端位于一个 URL（例如 localhost:3000）上而您的后端服务器位于另一个 URL（例如 localhost:5000）上，因此您在这里遇到的是跨源资源共享 (CORS) 错误。出于安全目的，浏览器具有此功能，作为仅允许执行来自同一 URL 的请求的一种方式。

此类错误的解决方案在于服务器，以及一种控制它的方法，您需要使用此软件包对其进行配置

在 expressjs 中，您可以按如下方式使用该包：

const express = require('express')
const app = express()
const cors = require('cors')
 
app.use(cors())

如果您想要一个特定的 url 访问您的后端，您也可以将参数传递给 cors 中间件，否则如果您将其留空，则意味着任何 URL 都具有权限。

app.use(cors({
 origin: "http://yoururl"
}))

您可以查看文档以获取更多详细信息。

于 2021-11-09T08:32:49.987 回答
0

我希望这个 geeksforgeeks 详细的解释链接对你有同样的帮助 - -

https://www.geeksforgeeks.org/how-to-connect-node-js-with-react-js/

于 2021-11-08T08:27:42.220 回答