ReactJS向ASP.NET Core 6.0发送HTTP POST请求后端无法接收数据问题求助

阿华AIGC实验室

2026-4-27

解决React向ASP.NET Core 6 Web API发送POST请求时的400 Bad Request错误

嘿，我一眼就瞅到问题所在了——你的前后端数据格式不匹配，这才导致了400错误！

问题根源

你前端用JSON.stringify()把数据转成了JSON格式，请求头设的是Content-Type: application/json，但后端的Login方法里用了[FromForm]特性，这是告诉ASP.NET Core要从**表单数据（x-www-form-urlencoded或multipart/form-data）**里解析参数，而不是JSON。两者格式不兼容，后端自然解析不了你的请求，就返回400 Bad Request了。

这也能解释为什么Postman用x-www-form-urlencoded能成功——因为那刚好匹配后端[FromForm]的要求，而你前端发的是JSON，完全不对路。

两种解决方案，选一个就行

方案1：修改后端，接收JSON格式（推荐，REST API常用JSON）

把后端Login方法里的[FromForm]改成[FromBody]，这样ASP.NET Core就会从请求体的JSON里解析参数了：

[Route("[controller]")] 
[ApiController] 
public class UserController : ControllerBase { 
  [Route("/Login")] 
  [HttpPost] 
  // 把[FromForm]换成[FromBody]
  public ActionResult<ResponseMessage> Login([FromBody] LoginData LoginData) { 
    // 此处执行登录操作 
  } 
}

改完之后，你原来的React fetch代码（包括Axios写法）都不用动，就能正常工作了——因为Axios默认也是发送JSON格式的请求。

方案2：修改前端，发送表单格式数据

如果不想改后端，那前端就把数据改成FormData格式发送，去掉Content-Type头（浏览器会自动帮你设置正确的表单头）：

const handleSubmit = async (e) => { 
  e.preventDefault(); 
  try{ 
    const formData = new FormData();
    formData.append('mail', email);
    formData.append('pwd', password);
    
    const res = await fetch(`http://localhost:5122/Login`, { 
      method: "post", 
      body: formData, // 直接传FormData
    }); 

    // 别忘了处理响应状态
    if (!res.ok) throw new Error('登录请求失败');
    
    setEmail(''); 
    setPassword(''); 
    setSuccess(true); 
  } catch(err) {
    console.error('登录出错:', err);
    // 这里可以加用户可见的错误提示
  }
}

如果用Axios的话，写法类似：

const handleSubmit = async (e) => {
  e.preventDefault();
  try {
    const formData = new FormData();
    formData.append('mail', email);
    formData.append('pwd', password);
    
    const res = await axios.post('http://localhost:5122/Login', formData);
    
    setEmail('');
    setPassword('');
    setSuccess(true);
  } catch(err) {
    console.error(err);
  }
}