Express结合socket.io-client二次POST请求报Cannot set headers错误如何解决

报错根因 #

• 全局仅初始化了1个socket.io客户端实例，每次收到/heat_bomb POST请求时，你都通过socket.on('boom')新增了一个永久生效的事件监听，该监听不会随请求结束自动销毁
• 第一次请求触发后，socket上绑定了1个boom事件回调，收到服务端返回时调用res.send可以正常响应
• 第二次请求触发时，socket上会新增第二个boom事件回调，此时同一事件绑定了两个不同请求的响应逻辑。下次收到服务端boom事件时，两个回调会同时执行：第一个回调对应的第一次请求的响应已经结束，再次调用res.send就会抛出ERR_HTTP_HEADERS_SENT错误
• 额外隐患：如果存在并发请求，还会出现响应串掉的问题，比如A请求的返回结果被发送给B请求

修复方案 #

方案1：单次事件监听（适合低并发、请求顺序和返回顺序一致的场景） #

将socket.on改为socket.once，每次绑定的事件监听触发一次后就会自动销毁，不会残留多余回调，同时增加超时处理避免请求永久挂死：

app.post('/heat_bomb', (req, res) => {
  // 超时处理，10秒未返回则响应超时错误
  const timer = setTimeout(() => {
    res.status(504).send('请求超时')
  }, 10000)

  socket.emit('heat_bomb', req.body.elem)
  // 用once替代on，触发一次后自动移除监听
  socket.once('boom', (data) => {
    clearTimeout(timer)
    res.send(data)
  })
})

方案2：请求ID匹配（推荐，支持高并发场景） #

socket.io本身没有原生的请求-响应一一对应机制，所以需要自定义请求ID做匹配，保证返回结果准确发送给对应的请求，同时避免内存泄漏：

1. 约定前后端通信规则：客户端emit事件时携带唯一请求ID，服务端返回boom事件时将该ID原样带回
2. 全局只绑定一次boom事件监听，通过Map存储请求ID和对应响应实例的映射关系
3. 增加超时清理逻辑，避免长时间未返回的请求占用内存

修复后的完整app.ts代码：

import express from 'express'
import { io } from 'socket.io-client'
import bodyParser from 'body-parser'
import { randomUUID } from 'crypto'

const app = express()
const PORT = 8080

const socket = io(`http://localhost:2002`, {
  query: {
    hello: "merhaba"
  }
})

// 全局存储请求ID和对应响应实例的映射
const resMap = new Map<string, Express.Response>()
// 全局只绑定一次boom事件监听，统一处理所有返回结果
socket.on('boom', (data: { reqId: string, payload: any }) => {
  const res = resMap.get(data.reqId)
  if (res) {
    res.send(data.payload)
    resMap.delete(data.reqId)
  }
})

app.use(bodyParser.urlencoded({ extended: false }))

app.get('/', (req, res) => {
  res.sendFile(__dirname + `/index.html`)
})

app.post('/heat_bomb', (req, res) => {
  // 生成唯一请求ID
  const reqId = randomUUID()
  // 存储当前请求的响应实例
  resMap.set(reqId, res)
  // 发送事件时携带请求ID和业务参数
  socket.emit('heat_bomb', { reqId, elem: req.body.elem })
  // 超时清理逻辑
  setTimeout(() => {
    if (resMap.has(reqId)) {
      res.status(504).send('请求超时')
      resMap.delete(reqId)
    }
  }, 10000)
})

app.listen(PORT, () => {
  console.log(`Server Running: ${PORT}`)
})

对应的socket.io服务端适配示例：

// socket.io服务端代码，仅需做少量修改
io.on('connection', (socket) => {
  socket.on('heat_bomb', (data) => {
    const { reqId, elem } = data
    // 原有业务逻辑处理
    const result = `处理结果：${elem}`
    // 返回时携带原请求ID
    socket.emit('boom', { reqId, payload: result })
  })
})

不推荐备选方案：每次POST请求新建一个socket.io实例，请求结束后断开连接。该方案会频繁创建销毁TCP连接，性能损耗极大，仅适合请求量极低的场景使用。

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