如何将Express/Node.js的验证错误传递至前端控制台或界面？

我是Express/Node.js新手，现在有个问题：怎么把Express里的验证错误发送到前端控制台或者用户界面？

我的后端代码（UserController.js） #

exports.create = (req, res) => {
    
    let data = req.body;
    Users.create(req.body)
    try {
        res.status(200).send(req.body);
    } catch (error) {
        if (error.response) {
            // If server responded with a status code for a request
            console.log("Data ", error.response.data);
            console.log("Status ", error.response.status);
            console.log("Headers ", error.response.headers);
        } else if (error.request) {
            // Client made a request but response is not received
            console.log("called", error.request);
        } else {
            // Other case
            console.log("Error", error.message);
        }
        // res.status(500).send({message: error.message});
        return res.status(401).send(error.message);
    }
}

遇到的问题 #

用Postman提交缺少必填项的表单时，数据没存入数据库，Express控制台会出现验证错误，但我希望这个错误能显示在前端控制台，或者用提示框/toast展示；另外禁用前端验证提交表单时，请求返回状态码200，但Express日志里有错误。

我的前端提交代码（AddUser.jsx） #

const onSubmit = async (data) => {
        try {
            const response = await axios.post("http://localhost:8000/users", data); // my database.
            toastSuccess("Form is Submitted");
            console.log(response.data);
        }
        catch (error) {
            if (error.response) {
                console.log(error.response.data);
                console.log(error.response.status);
                console.log(error.response.headers);
            } else if (error.request) {
                console.log(error.request);
                toastError("Error Request")
            } else {
                console.log('Error', error.message);
            }
        }
    };

解决方案 #

1. 修正后端错误捕获逻辑 #

你的后端代码有两个核心问题：Users.create是异步操作但没加await，且try块的位置错误，导致验证错误根本没被catch到，所以前端收到了200状态码。修改后的代码如下：

exports.create = async (req, res) => { // 标记为async函数
    try {
        // 用await等待create操作完成
        const user = await Users.create(req.body);
        // 返回创建成功的用户数据，而非原请求体
        res.status(200).send(user);
    } catch (error) {
        // 优先处理Sequelize的验证错误（假设你用的是Sequelize ORM）
        if (error.name === 'ValidationError') {
            // 提取所有字段的验证错误信息
            const errors = Object.values(error.errors).map(err => err.message);
            console.log("验证错误:", errors);
            // 返回400状态码（表示请求参数错误）和详细错误信息
            return res.status(400).send({ 
                message: "表单验证失败", 
                errors: errors 
            });
        } 
        // 处理其他类型的错误
        else if (error.response) {
            console.log("响应数据 ", error.response.data);
            console.log("状态码 ", error.response.status);
            console.log("响应头 ", error.response.headers);
            res.status(error.response.status).send(error.response.data);
        } else if (error.request) {
            console.log("请求已发送但无响应:", error.request);
            res.status(503).send({ message: "服务暂时不可用" });
        } else {
            console.log("错误详情:", error.message);
            res.status(500).send({ message: error.message });
        }
    }
}

2. 优化前端错误展示逻辑 #

前端需要根据后端返回的错误信息，将其打印到控制台并展示给用户。修改后的代码如下：

const onSubmit = async (data) => {
    try {
        const response = await axios.post("http://localhost:8000/users", data);
        toastSuccess("表单提交成功");
        console.log("创建成功的用户:", response.data);
    } catch (error) {
        if (error.response) {
            console.log("后端返回错误:", error.response.data);
            console.log("状态码:", error.response.status);
            
            // 根据状态码和错误信息展示提示
            if (error.response.status === 400) {
                // 合并多个验证错误信息
                const errorText = error.response.data.errors 
                    ? error.response.data.errors.join('；') 
                    : error.response.data.message;
                toastError(`提交失败：${errorText}`);
            } else {
                toastError(`请求失败：${error.response.data.message || '未知错误'}`);
            }
        } else if (error.request) {
            console.log("请求无响应:", error.request);
            toastError("请求失败，无法连接到服务器");
        } else {
            console.log('错误详情:', error.message);
            toastError(`提交失败：${error.message}`);
        }
    }
};

关键说明 #

• 异步错误捕获：Users.create是异步函数，必须用await等待执行完成，否则错误会被遗漏，导致前端收到错误的200状态码。
• 验证错误区分：Sequelize的验证错误会带有name: 'ValidationError'标识，可以提取每个字段的具体错误信息返回给前端。
• 状态码规范：验证错误用400（Bad Request）而非401（未授权），符合HTTP状态码的语义。

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