客户端Socket无法连接服务端Socket，跨源连接被阻问题求助

问题根源 #

1. 服务端代码存在两处错误：未引入express模块，且用app.listen()启动服务（Socket.io绑定的是http.Server实例，而非express app）。
2. Socket.io的跨域配置不能仅依赖express的cors中间件，需要单独配置Socket.io的CORS规则。
3. 本地直接打开HTML用的是file://协议，属于跨域场景，客户端调用io()时未指定服务端地址，默认会请求当前页面的协议（file://），导致连接失败。

修复步骤 #

1. 修正服务端代码（index.js）

const http = require('http');
const express = require('express'); // 补充引入express模块
const cors = require('cors');
const socketio = require('socket.io');

const app = express();
app.use(cors())
const server = http.createServer(app);
// 配置Socket.io的CORS规则，允许所有来源（开发环境可用，生产环境建议限制具体域名）
const io = socketio(server, {
  cors: {
    origin: "*",
    methods: ["GET", "POST"]
  }
});

const PORT = process.env.PORT || 3000; // 调整PORT赋值顺序，避免覆盖环境变量

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

server.listen(PORT, () => console.log(`server running on port ${PORT}`)); // 改用server.listen启动服务

2. 修正客户端代码（index.html）

调用io()时明确指定服务端地址：

<!DOCTYPE html>
<html>
  <head>
    <title>Connect Chord</title>
  </head>
  <body>
    <script src="./node_modules/socket.io/client-dist/socket.io.js"></script>
    <script>
      // 指定服务端的HTTP地址，Socket.io会自动升级为WebSocket连接
      const socket = io('http://localhost:3000');
    </script>
  </body>
</html>

验证方法 #

1. 重新启动服务端：node index.js
2. 打开index.html（本地直接打开即可），此时客户端控制台不会再出现跨域错误，服务端会打印New ws connection。

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