如何在Express的res.redirect重定向后传递变量渲染，不使用passport和session

你遇到的Cannot set headers after they are sent to the client报错，本质是res.redirect已经向客户端返回了完整的响应（包含302状态码和跳转地址），当前请求的响应生命周期已经结束，后续再执行res.render相当于尝试重复发送响应，自然触发错误。你之前尝试的专用重定向路由报错也是同理，只要在同一个路由处理逻辑中同时调用重定向和渲染方法，就会出现该问题。

最易实现的是通过URL查询参数传递提示信息，步骤如下：

• 第一步：重定向时将消息编码后拼接到目标URL的查询参数中
  代码示例：

  // 用encodeURIComponent对消息内容编码，避免空格、特殊符号导致URL格式错误
  const message = encodeURIComponent('登录成功')
  res.redirect(`/?message=${message}`)
  

• 第二步：在重定向目标路由中读取查询参数，传递给渲染模板
  代码示例：

  router.get('/', (req, res) => {
    // 读取查询参数中的message，不存在则传空字符串
    res.render('index', { message: req.query.message || '' })
  })
  

注意：该方案适合传递非敏感的短提示内容，敏感信息不建议通过URL传递，避免留在浏览历史、服务器日志中。

• 可选优化：消除URL上的可见参数
  如果不想让message参数一直显示在地址栏，且刷新页面后不再重复显示提示，可以在前端模板中加入如下逻辑，渲染完提示后主动清除URL参数：

  <% if (message) { %>
    <!-- 渲染提示框 -->
    <div class="success-tip"><%= message %></div>
    <script>
      // 利用history API替换当前URL，移除message参数
      if (window.history.replaceState) {
        const currentUrl = new URL(window.location.href)
        currentUrl.searchParams.delete('message')
        window.history.replaceState({}, document.title, currentUrl.toString())
      }
    </script>
  <% } %>
  

如果不想使用URL参数，也可以通过浏览器本地存储实现：

• 跳转前将消息存入sessionStorage
• 跳转后的页面加载时读取sessionStorage中的消息，渲染后立即删除即可

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