将 React js 应用程序与节点 js 服务器连接的最佳方式是什么？

Question

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

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

但是我在 Brave Browser 中遇到了这个错误

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

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

Answer 1

由于您的前端位于一个 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"
}))

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

Answer 2

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

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