为反应节点应用程序套接字错误设置 cors - Javascript

介绍

在使用React和Node.js构建应用程序时，您可能需要在客户端和服务器之间进行跨域通信。为此，可以使用CORS（跨源资源共享）策略来减轻Web浏览器的安全限制。

在本文中，我们将了解什么是CORS以及如何为React和Node.js应用程序设置CORS。

什么是CORS？

跨源资源共享（CORS）是一种使Web浏览器允许从不同源发出的请求的机制。在默认情况下，Web浏览器（如Chrome、Firefox等）将限制来自不同源的请求，但CORS协议允许我们明确指定哪些请求可以通过。

为反应节点应用程序设置CORS

在React和Node.js应用程序中，我们可以使用cors包来启用CORS。安装cors包可以使用npm：

npm install cors

在Express中，可以使用以下代码设置CORS：

const express = require("express");
const cors = require("cors");
const app = express();

app.use(cors());

为单独的路由启用CORS，可以使用以下代码：

app.get("/api/data", cors(), (req, res) => {
  // Code here
});

在客户端中，我们可以使用fetch函数发送CORS请求。如下所示：

fetch("http://localhost:5000/api/data")
  .then((res) => res.json())
  .then((data) => console.log(data))
  .catch((err) => console.log(err));

结论

CORS允许我们在React和Node.js应用程序之间实现跨域通信。使用cors包启用CORS非常容易，并且可以为Web应用程序提供更大的灵活性和互操作性。