React调用Node.js注册接口遇400 Bad Request错误求排查

首先，导致你收到400 Bad Request的核心原因是前端发送给后端的注册数据是空的！

看你的React组件saveUser函数里这段代码：

const data = {
  name: user.name,
  email: user.email,
  password: user.password
};

这里的user是你组件初始化时定义的空对象（const user = {name: '', email: '', password: '', confirmPassword: ''}），它自始至终都没有被更新过。用户输入的所有数据都存在userData这个状态里，所以你传给后端的其实都是空字符串，直接触发了后端Joi校验的失败（后端要求name、email、password至少6位且必填），因此返回400错误。

修复步骤 #

把请求数据的来源从user改成userData即可：

const saveUser = e => {
  e.preventDefault();
  // 改用userData里的用户输入数据
  const { name, email, password } = userData;
  const data = { name, email, password };
  
  Service.signUp(data)
    .then(response => {
      // ... 后续代码不变
    })
    .catch(error => {
      // 这里可以优化错误提示，取后端返回的具体信息
      const errorMessage = error.response?.data || error.message;
      setError(errorMessage);
      console.log(errorMessage);
    })
}

额外优化建议 #

1. 前端校验对齐后端规则：目前前端只做了非空和密码一致性校验，但后端要求字段长度至少6位，建议在前端也加上这个校验，避免无效请求：

const btn = 
  name.length < 6 || email.length < 6 || password.length < 6 || password !== confirmPassword 
  ? <button disabled>Inscription</button> 
  : <button>Inscription</button>

2. 错误信息更友好：后端返回的错误信息（比如"Email already exists"或者字段长度不足的提示）在error.response.data里，你可以直接展示这个信息给用户，而不是默认的Error对象信息。

确认其他配置没问题 #

你的后端app.js里已经正确配置了express.json()中间件（用来解析JSON请求体）和CORS，所以跨域和请求体解析的环节是正常的，不需要调整。

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