解决Socket.io跨域CORS错误及客户端连接服务端问题

1. 修正Server端配置（解决跨域+端口不匹配+确保连接日志输出） #

你的代码存在两个核心问题：服务端监听3000端口但前端连接4000，且未配置跨域规则。修改后的server.js如下：

const server = require('http').createServer();
// 配置跨域规则，同时指定监听端口与前端一致
const io = require('socket.io')(server, {
  cors: {
    origin: "*", // 开发环境可临时用*，生产环境请替换为实际前端域名
    methods: ["GET", "POST"]
  }
});

// 监听4000端口，和前端连接地址保持一致
server.listen(4000, () => {
  console.log('Server running on port 4000');
});

io.on('connection', (socket) => {        
  console.log("A user is connected");
  // 可选：打印Socket ID便于调试
  console.log(`Socket ID: ${socket.id}`);
});

说明：

• 端口统一：将服务端监听端口改为4000，和前端io('http://127.0.0.1:4000')的地址匹配
• 跨域配置：Socket.io v3及以上版本默认禁用跨域，必须显式通过cors参数开启，否则会触发CORS拦截
• 新增服务启动日志：确认服务正常运行，避免端口不匹配导致的排查困难

2. 修复前端Uncaught ReferenceError: io is not defined错误 #

你用ES模块导入的io仅在模块脚本作用域内有效，普通脚本script.js无法访问。提供两种解决方式：

方式一：将script.js改为模块脚本 #

修改前端页面中script.js的引入：

<script type="module" src="javascripts/script.js"></script>

然后在script.js顶部添加导入语句：

import { io } from "socket.io-client";
// 后续游戏逻辑正常编写
const socket = io('http://127.0.0.1:4000');
// ... 你的游戏代码

方式二：将io挂载到全局对象 #

在模块脚本中将io挂载到window，让普通脚本能访问：

<script type="module">
  import { io } from "socket.io-client";
  window.io = io; // 挂载到全局作用域
  const socket = io('http://127.0.0.1:4000');
</script>

3. 验证操作 #

1. 重启Node服务：执行node server.js，终端会输出Server running on port 4000
2. 打开前端页面，浏览器控制台无跨域错误，同时服务端终端会打印A user is connected（及可选的Socket ID）

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