使用Socket.IO搭建聊天室遇Cross-Origin Request Blocked错误求助

问题根源分析 #

你的代码存在几个关键问题引发跨域错误：

• 端口不匹配：服务端实际监听3000端口，但启动日志和客户端连接地址都写的是3030，连接目标不存在触发跨域拦截
• 跨域配置缺失：Socket.IO默认不会自动允许跨域请求，需要显式配置允许的源
• 重复绑定连接事件：多次调用io.on('connection')属于冗余代码，可能引发逻辑冲突
• 客户端脚本路径可能错误：本地引入Socket.IO客户端的路径如果不对，会导致无法加载客户端库，间接引发连接问题

修复后的服务端代码 #

const express = require('express');
const app = express();
const http = require('http');
const server = http.createServer(app);
const { Server } = require("socket.io");

// 配置跨域规则，允许本地前端访问
const io = new Server(server, {
  cors: {
    origin: "http://localhost:3000",
    methods: ["GET", "POST"]
  }
});

app.get('/', (req, res) => {
  res.sendFile(__dirname + '/index.html'); // 确认文件名与实际文件一致
});

// 合并所有连接事件逻辑，避免重复绑定
io.on('connection', (socket) => {
  console.log('a user connected');
  
  socket.on('disconnect', () => {
    console.log('user disconnected');
  });

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

// 统一端口并正确输出日志
server.listen(3000, () => {
  console.log('listening on *:3000');
});

修复后的客户端代码 #

<ul id="messages"></ul>
<form id="form" action="">
    <input id="input" autocomplete="off" /><button>Send</button>
</form>

<!-- 使用CDN引入Socket.IO客户端，避免本地路径错误 -->
<script src="https://cdn.socket.io/4.7.2/socket.io.min.js"></script>

<script>
    // 连接地址与服务端端口保持一致
    const socket = io("http://localhost:3000");

    const messages = document.getElementById('messages');
    const form = document.getElementById('form');
    const input = document.getElementById('input');

    form.addEventListener('submit', function(e) {
        e.preventDefault();
        if (input.value) {
            socket.emit('chat message', input.value);
            input.value = '';
        }
    });

    socket.on('chat message', function(msg) {
        const item = document.createElement('li');
        item.textContent = msg;
        messages.appendChild(item);
        window.scrollTo(0, document.body.scrollHeight);
    });
</script>

验证步骤 #

1. 确保服务端与客户端端口完全一致（均为3000）
2. 安装依赖：npm install express socket.io
3. 启动服务：node server.js
4. 打开浏览器访问http://localhost:3000，测试发送消息并查看控制台日志

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