Postman调用接口正常但React端POST请求返回400错误如何解决？

你请求体的字段名和后端要求的不匹配，是触发400错误的直接诱因：

• Postman里提交的邮箱字段键名是email
• React代码中构造请求体时用的键名是mail
  后端接口校验必填字段时找不到预期的email字段，直接返回400 Bad Request。

除此之外你的axios写法也存在两处错误，会额外引发运行时报错：

• res.json()是Fetch API的用法，axios返回的响应数据已经自动做了JSON解析，直接从res.data取即可，不需要额外调用解析方法
• catch回调需要传入函数，你写的catch(console.log("Error"))会在页面加载时就执行打印，而非请求报错时触发

1. 修正字段名和axios调用逻辑，参考写法如下：

const [mail, setMail] = useState('');
const [passwordValue, setPasswordValue] = useState('');
const [name, setName] = useState('');
const schoolAccount = false;

const handleSubmit = (e) => {
    e.preventDefault();
    // 把mail键名改为后端要求的email
    const data = {email: mail, passwordValue, name, schoolAccount}

    axios.post(baseURL, data)
    .then(res => {
        // 直接从res.data取响应数据
        console.log(res.data)
    })
    .catch(err => {
        console.log("Error", err)
    });
}

2. 如果修改后仍然报错，可以按以下路径排查：

• 对比浏览器网络面板中React请求的请求头、请求体，和Postman的请求内容是否完全一致
• 确认后端CORS策略已经配置了允许你前端项目域名的POST请求
• 确认请求头的Content-Type和Postman一致，默认axios发JSON格式请求会自动带上application/json，如果后端要求其他格式需要手动配置

内容的提问来源于stack exchange，提问作者J. Petersen