Node.js/Express注册表单提交后无法跳转，出现ERR_HTTP_HEADERS_SENT错误

问题现象 #

使用Node.js/Express开发网站注册表单，路由配置和数据库连接已完成，但提交表单时出现以下异常：

• 表单数据可成功存入MongoDB，但页面仅刷新清空内容，无法跳转到首页
• VSCode终端抛出错误：

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client
at new NodeError (node:internal/errors:387:5)
at ServerResponse.setHeader (node:_http_outgoing:603:11)
at ServerResponse.header (C:\Users\Mmart\Desktop\twitter\node_modules\express\lib\response.js:794:10)
at ServerResponse.send (C:\Users\Mmart\Desktop\twitter\node_modules\express\lib\response.js:174:12)
at done (C:\Users\Mmart\Desktop\twitter\node_modules\express\lib\response.js:1035:10)
at Object.exports.renderFile (C:\Users\Mmart\Desktop\twitter\node_modules\pug\lib\index.js:448:12)
at View.exports.__express [as engine] (C:\Users\Mmart\Desktop\twitter\node_modules\pug\lib\index.js:493:11)
at View.render (C:\Users\Mmart\Desktop\twitter\node_modules\express\lib\view.js:135:8)
at tryRender (C:\Users\Mmart\Desktop\twitter\node_modules\express\lib\application.js:657:10)
at Function.render (C:\Users\Mmart\Desktop\twitter\node_modules\express\lib\application.js:609:3)

相关代码 #

const express = require('express');
const app = express();
const router = express.Router();
const bodyParser = require("body-parser");
const User = require('../schema/userSchema');
const bcrypt = require("bcrypt");
app.set("view engine", "pug");
app.set("views","views");
app.use(bodyParser.urlencoded({extended:false}));

router.get("/", (req,res,next) => {
        res.status(200).render("register");
})

router.post("/", async (req,res,next) => {
        var firstName = req.body.firstName.trim();
        var lastName = req.body.lastName.trim();
        var username = req.body.username.trim();
        var email = req.body.email.trim();
        var password = req.body.password;

        var payload = req.body;

        if(firstName && lastName && username && email && password){
                var user = await User.findOne({
                    $or: [
                        { username: username},
                        { email: email}
                    ]
                })
                .catch((error) => {
                    console.log(error);
                    payload.errorMessage = "Error.";
                    res.status(200).render("register",payload);
                });

            if(user == null){
                var data = req.body;
                data.password = await bcrypt.hash(password, 10);
                User.create(data)
                .then((user) =>{
                    req.session.user = user;
                    return res.redirect("/");
                })

            }
            else{
                if(email == user.email){
                    payload.errorMessage = "email already in use.";
                }
                else{
                    payload.errorMessage = "username already in use.";
                }
                res.status(200).render("register", payload);
            }
        }
        
        else{
            payload.errorMessage = "Make sure each feild has a valid value.";
            res.status(200).render("register");
        }
        res.status(200).render("register");
})
module.exports = router;

问题原因与修复 #

核心问题是一个HTTP请求被多次发送响应，Express规则是每个请求只能有一次响应输出，代码中存在多处未终止执行流程就触发后续响应的情况：

1. 多余的全局响应语句：路由post方法最后一行res.status(200).render("register");会在所有分支执行完毕后强制发送响应，不管前面已经调用了res.redirect或res.render，这是触发错误的主要原因，直接删除该行。

2. catch块未终止执行：User.findOne的catch块中调用res.render后，需要添加return终止函数后续执行，避免代码继续运行导致重复响应。

3. else分支传递payload：else分支中res.render没有传入payload，导致错误信息无法显示，修改为res.status(200).render("register", payload);。

4. 统一异步处理风格：把User.create的then/catch改为await风格，保持代码一致性，避免嵌套。

修复后的完整代码 #

const express = require('express');
const app = express();
const router = express.Router();
const bodyParser = require("body-parser");
const User = require('../schema/userSchema');
const bcrypt = require("bcrypt");
app.set("view engine", "pug");
app.set("views","views");
app.use(bodyParser.urlencoded({extended:false}));

router.get("/", (req,res,next) => {
    res.status(200).render("register");
})

router.post("/", async (req,res,next) => {
    const firstName = req.body.firstName.trim();
    const lastName = req.body.lastName.trim();
    const username = req.body.username.trim();
    const email = req.body.email.trim();
    const password = req.body.password;

    const payload = {...req.body};

    if(firstName && lastName && username && email && password){
        try {
            const user = await User.findOne({
                $or: [
                    { username: username},
                    { email: email}
                ]
            });

            if(user == null){
                const data = {...req.body};
                data.password = await bcrypt.hash(password, 10);
                const newUser = await User.create(data);
                req.session.user = newUser;
                return res.redirect("/");
            }
            else{
                if(email === user.email){
                    payload.errorMessage = "邮箱已被使用";
                }
                else{
                    payload.errorMessage = "用户名已被使用";
                }
                return res.status(200).render("register", payload);
            }
        } catch (error) {
            console.log(error);
            payload.errorMessage = "服务器错误";
            return res.status(200).render("register",payload);
        }
    }
    
    else{
        payload.errorMessage = "请确保所有字段都填写有效内容";
        return res.status(200).render("register", payload);
    }
})
module.exports = router;

关键修改说明 #

• 删除了最后一行多余的res.render
• 把User.findOne的catch改为try/catch结构，统一异步处理，且每个响应后都添加return终止函数执行
• 修正else分支res.render未传入payload的问题
• 把var改为const/let，符合现代JS规范
• 替换为中文错误提示（可根据需求改回英文）

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