如何解决Node.js服务返回的file.js中初始化Socket.IO客户端报404的问题

你遇到的404 Not Found报错和是否手动复制socket.io.js代码到file.js里没有直接关联，核心原因有两个：

1. 客户端的运行源与Socket.IO服务端口不匹配：报错里的请求发往127.0.0.1:5500，也就是你本地静态预览工具（比如VS Code Live Server）的服务端口，但你的Socket.IO是和Express绑定在8000端口上的，5500端口的服务根本没有暴露Socket.IO的握手接口，自然返回404。
2. io()方法默认会以当前页面的源地址作为请求目标，不会自动识别你跑在其他端口上的Socket.IO服务，就算你把socket.io.js的源码全复制进file.js，执行初始化时还是会往错误的5500端口发请求。

• 不要手动复制socket.io.js的源码到业务文件里。Socket.IO服务本身会自动在8000端口暴露标准的客户端脚本地址/socket.io/socket.io.js，直接引用官方暴露的脚本即可，避免后续版本兼容问题。
• 初始化Socket.IO的时候，手动指定服务端的绝对地址，不要使用无参数的默认写法：

  // 替换成你实际Node服务的访问地址
  var socket = io('http://127.0.0.1:8000');
  

• 调整页面的脚本加载顺序，先加载正确地址的Socket.IO客户端脚本，再加载自己的业务file.js：

  <!-- 脚本地址指向Node服务的8000端口，不是5500端口的静态服务 -->
  <script src="http://127.0.0.1:8000/socket.io/socket.io.js"></script>
  <!-- 加载你通过/test接口返回的file.js业务代码 -->
  <script src="http://127.0.0.1:8000/test"></script>
  

• 如果你希望完全通过/test接口返回的file.js完成所有初始化逻辑，不需要单独在HTML里引入Socket.IO脚本，可以在file.js里动态加载正确地址的客户端脚本，等加载完成后再执行初始化：

  // 动态加载正确地址的Socket.IO客户端
  const socketScript = document.createElement('script');
  socketScript.src = 'http://127.0.0.1:8000/socket.io/socket.io.js';
  // 脚本加载完成后再执行初始化，避免找不到io方法的报错
  socketScript.onload = () => {
    const socket = io('http://127.0.0.1:8000');
    // 后续业务逻辑在这里编写
  };
  document.body.appendChild(socketScript);
  

跨端口部署补充：因为客户端跑在5500端口、服务端跑在8000端口，属于跨域请求，需要在服务端的Socket.IO初始化配置里加上跨域允许规则，不然就算地址配对了，浏览器也会拦截请求：

const io = require('socket.io')(http, {
  cors: {
    // 生产环境替换成实际的客户端访问域名，不要直接用通配符
    origin: "*",
    methods: ["GET", "POST"]
  }
});

内容的提问来源于stack exchange，提问作者Samuel Rodriguez-Lozano