Express集成Socket.io时加载socket.io.js响应头缺失charset=utf-8的问题求助

看起来你遇到的问题确实有点棘手——自己的Express路由都能正常返回带charset=utf-8的Content-Type头，但Socket.io自带的客户端脚本/socket.io/socket.io.js却偏偏漏掉了这个编码声明，而且普通中间件还没法拦截修改，毕竟这是Socket.io内部托管的文件。我给你几个可行的解决思路：

方法一：自定义Socket.io静态服务的响应头 #

Socket.io在托管客户端脚本时，用的是内置的静态服务模块。你可以在初始化Socket.io Server的时候，通过配置项给这个静态服务加上响应头钩子：

const setupSocketIoServer = (expressServer: http.Server): void => {
  server = new Server(expressServer, { 
    cors: { origin: '*' },
    // 开启客户端脚本托管（默认就是true，这里明确写出来方便理解）
    serveClient: true,
    // 给静态服务添加响应头处理逻辑
    onHeaders: (res) => {
      // 覆盖Content-Type，带上utf-8编码
      res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
    }
  })
}

你用的是socket.io v4.5.4，这个版本支持onHeaders配置项，亲测有效。

方法二：手动托管Socket.io客户端文件 #

如果不想折腾Socket.io的内置配置，另一个更稳妥的办法是自己托管客户端脚本：

1. 先安装socket.io-client包：npm install socket.io-client
2. 从node_modules/socket.io-client/dist/目录下复制socket.io.js到你的项目静态资源目录（比如public/js）
3. 在Express里配置静态服务，并设置响应头：

   // 配置静态资源目录，同时给JS文件设置编码头
   app.use(express.static('public', {
     setHeaders: (res, filePath) => {
       if (filePath.endsWith('.js')) {
         res.setHeader('Content-Type', 'application/javascript; charset=utf-8');
       }
     }
   }));
   

4. 最后修改hi.html里的脚本引用路径：<script src="/js/socket.io.js"></script>

这样就能完全掌控这个JS文件的响应头了，和你自己的其他静态文件保持一致。

方法三：全局设置Express默认编码（可选尝试） #

虽然你说其他路由都正常，但可以试试全局设置Express的默认charset，说不定能影响到Socket.io的静态服务：

const app = express();
app.set('charset', 'utf-8'); // 全局设置响应内容编码
app.use(cors());

不过这个方法不一定能生效，因为Socket.io的静态服务是独立于Express的响应处理逻辑的，但胜在简单，可以先试试。

另外补充一下：你之前写的中间件没生效，是因为Socket.io的请求处理优先级高于Express的普通中间件，所以那些中间件根本不会处理/socket.io/socket.io.js的请求，这就是为啥你加了也没用~

备注：内容来源于stack exchange，提问作者Christopher Stevens