JavaScript Express框架提交表单数据后如何渲染新页面？

你遇到的ERR_HTTP_HEADERS_SENT报错是因为同一次HTTP请求中多次调用了结束响应的方法：res.json()、res.render()都会向客户端发送响应头和响应体，调用后就不能再修改响应内容了。
你的代码中post.save()是异步操作，不会阻塞后续代码执行，所以程序会先执行res.render('submission_complete.ejs')完成响应返回，等post.save()执行完成触发then/catch回调时，又尝试调用res.json()第二次返回内容，就触发了该错误。

你的需求是表单提交成功后渲染成功提示页，属于服务端渲染的普通表单提交场景，不需要额外返回JSON数据，直接把渲染逻辑放到异步操作的回调中即可，修改后的路由代码如下：

router.post('/', (req, res) => {
  const post = new Post({
    title: req.body.title,
    description: req.body.description
  });

  post.save().then(data=> {
    // 数据保存成功后再渲染成功页面
    res.render('submission_complete.ejs');
  })
  .catch(err => {
    // 异常场景可以渲染错误页面，或者传入错误参数到提示页
    res.render('submission_complete.ejs', { message: '提交失败：' + err });
  });
});

如果你的场景需要同时返回保存后的数据给前端（比如用AJAX提交表单的前后端分离场景），可以去掉res.render()，只保留res.json(data)，由前端接收到返回数据后自行跳转页面或显示提交成功提示。

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