React前端与Express后端Socket.io连接CORS报错求助

本地React前端运行在3000端口，Express/Node后端运行在5000端口，使用socket.io和socket.io-client通信时，连接虽能建立，但前端控制台出现CORS报错：

Access to XMLHttpRequest at 'http://localhost:5000/socket.io/?EIO=4&transport=polling&t=OMmsufE' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
polling.js:334          

GET http://localhost:5000/socket.io/?EIO=4&transport=polling&t=OMmsufE net::ERR_FAILED 200

现有代码 #

前端App.js

import './App.css';

function App() {
  const socket = require('socket.io-client')('http://localhost:5000/socket.io/');

  socket.on('connect', () => {
    console.log('Connected to server');

    socket.on('message', (message) => {
      console.log('Received message:', message);
    });

    socket.emit('message', 'Hello, server!');
  });

socket.on('disconnect', () => {
  console.log('Disconnected from server');
});

  return (
    <div className="App">App 
    </div>
  );
}

后端index.js

const express = require('express');
const app = express();
const server = require('http').Server(app);
const io = require('socket.io')(server);

const cors = require("cors")
app.use(cors({ origin: 'http://localhost:3000' }));
io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  socket.on('message', (message) => {
    console.log('Received message:', message);
    io.emit('message', message);
  });
});
app.use("/socket.io/", (req, res, next) => {
  next()
})

app.get("/", (req, res) => console.log("hello"))

app.use(cors())

server.listen(5000, () => {
  console.log('Server listening on port 5000');
});

解决思路 #

• 修正客户端连接路径：Socket.io客户端不需要指定/socket.io/路径，直接连接后端根地址即可，多余的路径会导致请求异常。
• 给Socket.io配置CORS：Express的cors中间件只处理普通HTTP请求，Socket.io有独立的CORS配置项，必须在初始化io时设置。
• 清理冗余中间件：后端中针对/socket.io/的空中间件、重复的cors()调用都是无效的，直接删除即可。

修改后的代码 #

前端App.js（仅修改连接地址）

import './App.css';

function App() {
  // 去掉末尾的/socket.io/
  const socket = require('socket.io-client')('http://localhost:5000');

  socket.on('connect', () => {
    console.log('Connected to server');

    socket.on('message', (message) => {
      console.log('Received message:', message);
    });

    socket.emit('message', 'Hello, server!');
  });

  socket.on('disconnect', () => {
    console.log('Disconnected from server');
  });

  return (
    <div className="App">App 
    </div>
  );
}

后端index.js（修正Socket.io CORS配置）

const express = require('express');
const app = express();
const server = require('http').Server(app);
// 初始化io时配置CORS
const io = require('socket.io')(server, {
  cors: {
    origin: 'http://localhost:3000',
    methods: ['GET', 'POST']
  }
});

const cors = require("cors")
// 保留Express的cors配置（如果有其他HTTP接口需要）
app.use(cors({ origin: 'http://localhost:3000' }));

io.on('connection', (socket) => {
  console.log('User connected');

  socket.on('disconnect', () => {
    console.log('User disconnected');
  });

  socket.on('message', (message) => {
    console.log('Received message:', message);
    io.emit('message', message);
  });
});

app.get("/", (req, res) => {
  console.log("hello");
  res.send("hello"); // 补充send，避免请求挂起
})

server.listen(5000, () => {
  console.log('Server listening on port 5000');
});

额外说明 #

• Socket.io的CORS配置会自动处理/socket.io/路径下的请求，不需要额外为该路径添加中间件。
• 后端的根路由/补充了res.send，避免前端请求该路径时出现挂起的情况（可选，但更规范）。

内容的提问来源于stack exchange，提问作者FJTAIL