Inomnia与客户端Axios返回的Yup验证错误不一致，如何获取正确错误？

场景描述 #

我使用Yup做数据验证，规则如下：

beeraverage: yup.number("Not a number").min(0).nullable(true),

当用包含"beeraverage": "4.5.9"的对象测试时，在Insomnia工具中能得到预期的验证错误。

后端捕获Yup错误的代码如下：

.catch(yupError => {
    const errors = yupError.inner.reduce((acc, error) => {
        const { path, message } = error;
        if (!acc.hasOwnProperty(path)) {
            acc[path] = [message];
        } else {
            acc[path].push(message);
        }
        return acc;
    }, {});

    res.status(errorCode).json(new InvalidFieldErrorResponse(
        'Data invalid',
        errors,
        errorCode
    ));
});

疑问 #

1. 如何获取验证器中定义的"Not a number"错误信息？
2. 客户端使用Axios发送请求时，得到的是无关错误，怎么获取Yup的验证错误信息？

解答 #

1. 获取Yup自定义错误信息 #

你的后端代码已经通过error.message获取错误信息了，当输入"4.5.9"时，因为该字符串不是有效数字，Yup会触发number()的类型验证，此时对应path为beeraverage的错误项，其message就是你定义的"Not a number"。

如果没拿到预期信息，检查两点：

• 确认捕获的yupError是Yup的ValidationError实例，而非其他类型的错误
• 验证顺序：nullable(true)允许值为null，但传入字符串时会优先触发number()的类型验证，可通过遍历yupError.inner数组，找到path匹配的错误项，提取其message即可

2. 客户端Axios获取验证错误 #

Axios的error对象中，后端返回的验证错误数据存储在error.response.data里，而非error.message（error.message通常是网络层面的提示）。修改客户端的catch逻辑：

.catch(function (error) {
    if (error.response) {
        // 后端返回的验证错误详情
        console.log("验证错误详情: ", JSON.stringify(error.response.data, null, 4));
        // 提取对应字段的错误信息
        setError(error.response.data.errors.beeraverage?.[0] || '数据验证失败');
    } else {
        // 处理网络错误等其他情况
        setError(error.message);
    }
})

同时要确保后端在验证失败时返回4xx级别的状态码（比如400 Bad Request），Axios会将这类响应抛入catch分支；如果后端返回2xx状态码，Axios会走then分支，无法通过catch捕获验证错误。

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