多次调用res触发Cannot set headers after they are sent报错如何解决

HTTP协议规定单个请求只能对应一个响应，调用res.json()时已经完整发送了响应头+响应体给客户端，后续再调用res.redirect()尝试修改响应头、发送第二次响应，就会触发ERR_HTTP_HEADERS_SENT报错。

另外res.redirect()本身是返回3xx状态码、在响应头附加Location字段的响应，浏览器收到这类响应会直接执行跳转，不会读取响应体内的JSON数据，所以两个操作本身逻辑互斥，无法同时生效。

根据接口的调用场景选择对应方案即可：

场景1：接口由前端AJAX/Fetch调用 #

跳转逻辑交给前端处理，后端仅返回JSON响应：

module.exports = (app) => {
  app.get("/api/logout", (req, res) => {
    res.cookie('jwtCookie', '', {
        maxAge: 1
    });
    // 仅保留JSON返回逻辑，删除redirect代码
    res.status(200).json({ message: "user disconnected" });
  });
};

前端拿到响应后自行处理提示和跳转，参考代码：

// 前端登出调用示例
fetch('/api/logout')
  .then(res => res.json())
  .then(data => {
    // 可先展示提示信息再跳转
    console.log(data.message)
    location.href = '/'
  })

场景2：接口直接在浏览器地址栏访问，需要服务端触发跳转 #

可以把提示信息编码后附加到跳转地址的查询参数中，首页读取参数后展示提示：

module.exports = (app) => {
  app.get("/api/logout", (req, res) => {
    res.cookie('jwtCookie', '', {
        maxAge: 1
    });
    // 编码提示信息避免特殊字符出错
    const logoutMsg = encodeURIComponent('user disconnected')
    res.redirect(`/?message=${logoutMsg}`);
  });
};

首页加载时读取?message参数的值，解析后展示对应提示即可。

内容的提问来源于stack exchange，提问作者Massine Oueslati