Socket.IO连接故障：HTML前端无法连接5858端口的Node.js后端

我正在尝试将带.php扩展名的HTML前端与运行在5858端口的Node.js后端通过Socket.IO建立连接，处理前端的socket.on事件，但始终无法成功建立连接。虽然已经在Socket.IO配置中添加了CORS设置，还是出现连接报错。

Node.js后端代码 #

const express = require('express');
const app = express();

const connectdb = require('./db/connect.js');
const port = process.env.PORT || 5858
const DATABASE_URL = "mongodb://localhost:27017";
const server = require('http').createServer(app);

const io = require('socket.io')(server , {
  cors: {
    origin: false,
    withCredentials: false
  }
}).listen(server);

//connection to database
connectdb(DATABASE_URL);

//  apply to all requests
app.use(cors())
app.use(function (req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
  });
// app.use(express.limit('50M'));
app.use(bodyParser.json())  //Body Parser MiddleWare
app.use(express.json())

io.on('connection', (socket) => {
    console.log("new connection")
    socket.on('otpnumberevent', (data) => {
        console.log(data);
        let invid = data.id
           
invoicesModel.findOneAndUpdate(
  invid,
    data,   
  {
    "fields" : {"otpverified" : 1},
   "new": true 
  }
).exec((err , doc) =>{
            console.log(doc)
            if (err) {
                let response = {
                  message: "Failed",
                  doc: err
                }
                io.emit('messageSent', response)
              }
              else {
                let response = {
                  message: "Success",
                  doc: doc
                }
                
                io.emit('getotpresponse', response)
              }
    
            });
       
    });
  });

app.get('/' , (req , res) => {
    res.send("Welcome to Dma backend");
});

server.listen(port, () => {
  console.log('Server listening at port %d', port);
});

前端代码 #

<script src="https://cdnjs.cloudflare.com/ajax/libs/socket.io/4.5.4/socket.io.js" integrity="sha512-YeeA/Qxn5hYdkukScTCNNOhTrv1C2RubAGButJ1rmgQwZf/HdRaCGl+JAVkqsqaNRaYNHdheiuKKuPf9mDcqKg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

var socket = io('http://localhost:5858', { transports: ['websocket', 'polling', 'flashsocket'] }); //socket connection code, my nodejs server is running on 5858 port
socket.on('getotpresponse' , (data) =>{
    console.log(data);
    if(data.doc.otpverified == "Yes"){
        swal({
            title: "Success!",
            text: "Otp verification Successfull",
            icon: "success",
            button: "Okay!",
        }).then(function() {
            location.reload(true);
        });
    }else{
        swal({
            title: "Failed!",
            text: "OTP verification failed!",
            icon: "error",
            button: "Okay!",
        });
    }
})

报错截图 #

问题排查与解决方案 #

1. 修复Socket.IO CORS配置错误 #

当前origin: false的设置会拒绝所有跨域请求，需修改为允许前端来源：

const io = require('socket.io')(server , {
  cors: {
    origin: "http://localhost", // 前端运行地址，开发环境可临时用"*"
    methods: ["GET", "POST"],
    withCredentials: true
  }
});

同时删除.listen(server)，因为server已传入Socket.IO构造函数，后续server.listen(port)会启动服务。

2. 消除重复CORS设置冲突 #

后端同时使用app.use(cors())和自定义res.header中间件，会导致响应头重复。建议保留cors包配置：

const cors = require('cors');
app.use(cors({
  origin: "http://localhost",
  credentials: true
}));

删除自定义的res.header中间件。

3. 确保客户端与服务端版本兼容 #

前端使用Socket.IO 4.5.4，后端需安装对应版本：

npm install socket.io@4.5.4

4. 优化前端连接配置 #

去掉冗余的transports设置，Socket.IO会自动选择最优传输方式：

var socket = io('http://localhost:5858');

同时修正前端代码末尾多余的})语法错误。

5. 补充缺失的依赖引入 #

后端代码使用了cors和body-parser但未引入，需添加：

const cors = require('cors');
const bodyParser = require('body-parser');

执行npm install cors body-parser安装依赖。

6. 验证服务端启动状态 #

访问http://localhost:5858，确认能看到"Welcome to Dma backend"，确保服务正常运行。

内容的提问来源于stack exchange，提问作者Smitty's