Vite React应用中Socket.io无法连接的问题求助

问题情况 #

新搭建的Vite React应用里，Socket.io无法连接到后端服务器，但完全相同的代码放到Create React App（CRA）中就能正常工作。已确认客户端的useEffect确实执行，服务器也处于运行状态，但服务器端的connected日志从未触发。

服务器代码 #

const app = express();
app.use(cors());

const server: http.Server = http.createServer(app);
const io = new Server(server);

io.on("connection", (socket) => {
  console.log("connected");
});

客户端代码 #

useEffect(() => {
  const socket = io("/");
}, []);

我的Vite配置 #

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      "/api": {
        target: "http://localhost:5000",
        changeOrigin: true,
        secure: false,
      },
    },
  },
});

解决方法 #

问题根源 #

Vite的开发服务器代理逻辑和CRA不同，你当前只配置了/api路径的代理，但Socket.io的连接请求走的是/socket.io路径，没被代理到后端的5000端口。另外，客户端用io("/")初始化时，默认会连接Vite自己的3000端口，而非后端服务器。

修复步骤 #

1. 给Vite添加Socket.io代理规则
   修改vite.config.js，在proxy中新增/socket.io的代理配置，必须开启ws: true（因为Socket.io基于WebSocket）：

   export default defineConfig({
     plugins: [react()],
     server: {
       port: 3000,
       proxy: {
         "/api": {
           target: "http://localhost:5000",
           changeOrigin: true,
           secure: false,
         },
         // 新增Socket.io代理
         "/socket.io": {
           target: "http://localhost:5000",
           changeOrigin: true,
           secure: false,
           ws: true, // 必须开启WebSocket代理
         },
       },
     },
   });
   

2. 客户端代码可保持原样（或可选显式指定地址）
   原有的io("/")即可正常工作，因为Vite会将/socket.io请求转发到后端5000端口。如果仍有问题，也可以直接指定后端地址：

   useEffect(() => {
     const socket = io("http://localhost:5000");
   }, []);
   

   更推荐使用代理方式，避免生产环境修改地址，同时规避跨域问题。

3. 确认服务器CORS配置
   若你给CORS设置了来源限制，需确保允许http://localhost:3000访问；默认的cors()配置允许所有来源，无需额外修改。

验证 #

重启Vite开发服务器和后端服务器，重新连接后，服务器端应能打印出connected日志。

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