React使用Axios调用接口返回400状态码错误解决方法

问题根因 #

• Axios配置字段错误：application/x-www-form-urlencoded类型的POST请求，提交的参数必须放在data配置项中，你当前代码里写的userLogin属于自定义无效字段，根本不会作为请求体发送给后端。
• 参数格式错误：x-www-form-urlencoded要求请求体是key=value&key2=value2的URL编码格式，你传入JSON.stringify生成的JSON字符串不符合编码规范，后端无法解析。
• Postman自动导出的Axios代码没有适配Axios本身的参数规则，直接复制使用必然出错。
• 你的后端控制器加了[ApiController]特性，框架会自动做模型绑定校验，只要收不到符合要求的Email和Password字段，会直接返回400状态码，根本不会进入你写的Login方法内部逻辑。

修复方案 #

方案1：不改动后端代码，仅修正前端请求（最小改动） #

保留后端[FromForm]表单接收的逻辑，用原生URLSearchParams构造符合格式的表单参数，修正后的前端代码：

// 构造符合x-www-form-urlencoded规范的参数
const loginParams = new URLSearchParams();
loginParams.append('Email', document.getElementById('userName').value);
loginParams.append('Password', document.getElementById('password').value);

const requestConfig = {
  method: 'post',
  url: 'https://localhost:7024/api/User/Login',
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'
  },
  data: loginParams // 必须用data字段传参，不要自定义字段名
};

Axios(requestConfig)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.log(error);
  });

方案2：调整为前后端分离常用的JSON传参模式 #

如果不想用表单提交，可以改成JSON格式传参，需要同时修改前后端少量代码：

1. 后端接口修改，把[FromForm]替换为[FromBody]：

[HttpPost("[action]")]
public async Task<ActionResult<Token>> Login([FromBody] UserLogin userLogin)
{
  // 内部业务逻辑不用改
}

2. 前端Axios配置调整为JSON提交：

const requestConfig = {
  method: 'post',
  url: 'https://localhost:7024/api/User/Login',
  headers: {
    'Content-Type': 'application/json'
  },
  data: {
    Email: document.getElementById('userName').value,
    Password: document.getElementById('password').value
  }
};

额外注意 #

如果修正参数后仍然报错，检查.NET Core的CORS跨域配置，确保Program.cs中添加了允许React前端源地址访问的策略，不过当前400错误是参数绑定失败导致，优先按上述方案修复参数问题即可。

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