Node.js+Express环境下JWT Token无法设置到响应头问题求解

1. 「响应头已发送至客户端后无法再次设置」报错原因 #

• 异步逻辑时序混乱：你混用了async/await和回调写法，insertOne、createCollection、jwt.verify、bcrypt.compare都是异步操作，你没有等待异步操作完成就提前调用了res.send()，后续异步操作触发错误分支时再次调用res.send()就会导致重复发送响应
• 同一请求多次调用send：比如/account/login接口中，jwt验证通过后就执行了res.status(200).send(decoded)，后续密码比对完成后又会调用一次res.status(200).send(sendObject)，同一请求发送两次响应必然触发报错
• 注册逻辑存在bug：注册时查询用户是否存在的条件是包含加密后密码的完整user对象，只要新密码和旧密码不一样，就算用户名重复也会查询为空，导致同用户名可以重复注册

2. Token返回在响应体而非响应头的原因 #

你当前代码直接把token放到了res.send()的参数中，该参数是响应体的内容，自然不会出现在响应头中。跨域场景下还需要额外配置暴露自定义响应头，否则前端无法读取到你返回的token头。

修改后的/account/create接口代码 #

api.post("/account/create", async (req, res) => {
    try {
        // 使用bcrypt加密密码
        const hashedPassword = await bcrypt.hash(req.body.password, 10);

        const user = {
            username: req.body.username,
            password: hashedPassword
        };

        // 生成JWT token
        const token = jwt.sign({ username: req.body.username }, secret);

        // 修复：查询条件仅传用户名，避免同用户名重复注册
        const existUser = await logincollection.findOne({ username: req.body.username });
        if (existUser) {
            // 加return终止后续代码执行
            return res.status(400).send();
        }

        // 等待用户信息插入完成
        await logincollection.insertOne(user);
        // 等待用户个人集合创建完成
        await userdb.createCollection(req.body.username);

        // 修复：设置响应头，跨域场景需配置暴露token头
        res.set('Access-Control-Expose-Headers', 'token');
        res.set('token', token);

        // 发送响应体，无需重复携带token
        return res.status(200).send({ auth: true });
    } catch (err) {
        // 统一错误处理，避免多处重复调用send
        return res.status(404).send();
    }
})

修改后的/account/login接口代码 #

api.post("/account/login", async (req, res) => {
    try {
        const { username, password } = req.body;
        const token = req.headers["token"];

        // 优先判断token是否存在
        if (!token) {
            return res.status(401).send();
        }

        // 验证token有效性
        const decoded = jwt.verify(token, secret);

        // 查询用户是否存在
        const existUser = await logincollection.findOne({ username });
        if (!existUser) {
            return res.status(404).send();
        }

        // 比对密码是否匹配
        const match = await bcrypt.compare(password, existUser.password);
        if (!match) {
            return res.status(404).send();
        }

        console.log("User " + username + " logged in");
        // 仅调用一次send返回结果
        return res.status(200).send({
            username: existUser.username,
            decoded: decoded
        });
    } catch (err) {
        return res.status(500).send();
    }
})

• 前端请求/account/login接口时，需要主动将拿到的token放到请求头的token字段中，否则req.headers["token"]会返回undefined
• 如果你的服务配置了跨域(CORS)规则，需要在CORS配置中允许token作为请求头和响应头，否则会被浏览器拦截

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