React登录时Axios报400错误：缺少请求体问题求助

核心排查方向：请求体格式与Postman不一致 #

Postman能正常请求但Axios报错，90%以上是因为请求体的编码格式、参数传递方式和后端期望不匹配，按以下步骤逐一排查：

1. 核对Postman的请求Body类型

查看你的Postman截图，确认Body标签下选择的类型：

• 若为form-data或x-www-form-urlencoded：后端期望表单格式的请求体
• 若为raw > JSON：后端期望JSON格式的请求体

2. 对应调整Axios请求代码

根据Postman的请求类型，修改Axios写法：

情况1：Postman用form-data/x-www-form-urlencoded

错误写法（直接传JSON对象，会被Axios编码为application/json，与后端期望不符）：

// 错误：后端期望表单格式，却传递了JSON结构
axios.post('/api/login', {
  username: 'yourName',
  password: 'yourPwd'
})

正确写法（用FormData构造表单数据）：

const formData = new FormData();
formData.append('username', 'yourName'); // 参数名必须和Postman里完全一致
formData.append('password', 'yourPwd');

axios.post('/api/login', formData)
  .then(res => {
    // 登录成功：将响应数据存入sessionStorage
    sessionStorage.setItem('loginInfo', JSON.stringify(res.data));
    // 后续跳转或业务逻辑
  })
  .catch(err => console.log(err.response.data))

情况2：Postman用raw > JSON

确保Axios传递合法JSON对象，且Content-Type正确（Axios默认自动设置，若有全局拦截器可显式声明避免干扰）：

axios.post('/api/login', {
  username: 'yourName',
  password: 'yourPwd'
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(res => {
  sessionStorage.setItem('loginInfo', JSON.stringify(res.data));
})
.catch(err => console.log(err.response.data))

3. 检查参数名是否完全匹配

Postman中的参数名（如user_name）与Axios代码中的参数名（如username）必须完全一致，后端找不到对应参数时也会提示“缺少请求体”。

4. 排查全局Axios拦截器

若项目设置了Axios全局拦截器，检查是否擅自修改了请求体或请求头：

// 示例：错误的拦截器可能强制修改Content-Type，导致后端无法解析
axios.interceptors.request.use(config => {
  // 不要随意修改Content-Type，除非确认后端要求
  // config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
  return config;
})

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