React调用Express接口触发express-validator验证错误，Postman无异常

开发者阿泽

2026-7-4

问题解决：express-validator验证错误（前端发送数据结构不匹配）

问题现象

React应用通过Context的addNote方法发送POST请求到后端添加笔记，触发express-validator的验证错误，提示title和description长度需至少5字符。浏览器控制台显示payload内容正确，但用Postman/ThunderClient发送相同内容时无错误。

错误原因

从控制台返回的req.body可以看出，前端发送的数据被额外包裹在note对象中：

{
  "note": {
    "description": "description test",
    "tag": "",
    "title": "Reactjs"
  }
}

而后端的express-validator验证规则是直接读取req.body.title和req.body.description，但实际这两个字段存在于req.body.note层级下，导致验证时无法读取到有效值，触发长度不足的错误。而Postman发送时是将title、description放在请求body的根层级，因此验证通过。

解决方案

修改Context中addNote方法的请求body序列化逻辑，直接传递note对象，不要将其包裹在额外的对象中。

修改后的Context代码

const TestState = (props) => {
    const host = "http://localhost:5000"
    const [notes, setNotes] = useState([])

    //ADD A NOTE
    const addNote = async (note) => {
        console.log({ theNote: note })
        const response = await fetch(`${host}/api/notes/new`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                "Authorization": "--JWTauthToken--"
            },
            body: JSON.stringify(note), // 直接序列化note对象，无需额外包裹
        });
        const jsonData = await response.json();
        console.log(jsonData)
    } 
}