如何修复节点中的 CORS 问题并使用 socket.io 反应应用程序

how to fix CORS problem in node and react app with socket.io

你好,我们正在尝试在我们已经运行的应用程序中实现聊天功能,这是一个 MERN 堆栈应用程序, 我们选择使用 socket.io 因为它相当容易设置和使用,我们设法让它在本地工作但是当我们部署在我们的开发服务器上时聊天不工作,我们遵循了这个 socket.io 文档尝试解决当我们在本地遇到 CORS 问题时对我们有用的问题,https://socket.io/docs/v3/handling-cors/ 这是使用的服务器端代码:

const io = require("socket.io")(http, {
  cors: {
    origin: "<client web address>",
    methods: ["GET", "POST"],
  },

这本身在服务器上不起作用,但足以让它在本地工作,我们将 localhost:3000 放在那里。

 const io = require("socket.io")(http, {
      cors: {
        origin: "http/localhost:3000",
        methods: ["GET", "POST"],
      },

所以我们在客户端添加了这个,而不是

 socket = io(":5000")

当我们定义套接字时,我们将其更改为

socket = io("<server_ip_addresse>:5000");

GET http://************:5000/socket.io/?EIO=4&transport=polling&t=NbhodkH net::ERR_CONNECTION_TIMED_OUT

这是我们在负责聊天的组件尝试与服务器建立套接字时遇到的错误

我们如何解决这个问题?

解决方案是在两种设置中都使用网站 URL;对于后端的 cors 原始地址和在前端创建的套接字 所以

  const io = require("socket.io")(http, {
      cors: {
        origin: "<website URL>",
        methods: ["GET", "POST"],
      },

并且在从客户端设置与服务器的套接字时,我们使用了相同的URL,我们的应用程序部署在开发服务器

如此如此,没有任何端口

socket = io("<website URL>");