Node.js服务端Socket.IO无响应问题及CORS配置解决方案

问题现象 #

使用Node.js与Express搭建Socket.IO服务时，代码严格遵循官方文档及教程要求编写，客户端尝试连接运行在http://localhost:8090的服务端时，Socket.IO始终无响应。

问题根源 #

经排查，问题源于未在服务端Socket实例上配置CORS规则：自Socket.IO v3版本起，必须显式声明cors属性，指定允许接入Socket服务的源地址，才能正常完成连接。注意Express层面配置的CORS规则对Socket.IO不生效，需要单独给Socket.IO实例配置。

原服务端代码 #

const express = require ('express');
const bodyParser = require('body-parser');
const cookieParser =  require('cookie-parser');
const db = require("./Connection/pg_pool");
const authentication = require("./Config/auth");
const connectionError = require("./Config/connectionError");
const cors = require('cors');
let port = 8090;
let hostname = 'localhost';
const midtransClient = require('midtrans-client');
const paymentConf = require('./Config/payment');
const { encode } = require('node-encoder');
const axios = require('axios');

let payment =  paymentConf.paymentConf;
let errorMsg = connectionError.connectionError();
let auth = authentication.auth;

const app = express();

const server = require("http").createServer(app);
const io = require('socket.io')(server)
io.on("connection", socket => {
    console.log('NEW USER CONNECTED')
});

app.use(express.json());
app.use(cors({origin: true, credentials: true}));
app.use(express.urlencoded({extended: true}));
app.use(cookieParser());

server.listen(process.env.PORT || port, hostname, () => {
    console.log(`Listening to ${hostname}:${port}`)
})

原客户端代码（React示例） #

import React, {useState, useEffect, useRef, useCallback, useMemo} from 'react';
import { io } from "socket.io-client";

const ENDPOINT = "http://localhost:8090";
let socket;

export default function Chat(props) {

  const [text, setText] = useState('')
  const [req, setReq] = useState([]);
  const [messages, setMessages] = useState([]);
  const [send, setSend] = useState(false);


  useEffect(() => {
    socket = io(ENDPOINT);
    console.log('ini socker', socket.connected)
    socket.on("connect", (data) => {
      console.log(data)
    });
  }, []);
// 后续业务逻辑省略
....

修复方案 #

在服务端初始化Socket.IO实例时，单独传入CORS配置，指定允许的客户端源地址即可，示例中前端运行在http://localhost:3000，配置如下：

/* 前端运行在localhost:3000，只需在服务端Socket实例上定义cors规则，填入允许接入的源地址即可 */
const io = require('socket.io')(server, {
    cors: {
      origin: [`http://localhost:3000`],
      credentials: true
    }
})

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