FastAPI登录接口报422错误：请求字段无法被服务端识别

以下是几个最可能导致服务端提示username和password字段缺失的原因及解决办法：

1. fetch请求体未正确序列化为JSON字符串 #

React的fetch方法不会自动将JavaScript对象转换为JSON格式，直接传递对象作为body会导致服务端无法解析，进而触发字段缺失提示。

错误写法：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: { username: 'yourname', password: 'yourpass' } // 直接传对象，未序列化
});

正确写法：
必须用JSON.stringify()将对象转为JSON字符串：

fetch('/api/login', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify({ username: 'yourname', password: 'yourpass' })
});

2. 前后端参数接收方式不匹配 #

FastAPI有两种常见的参数接收方式，前端必须对应匹配：

• 如果后端用Pydantic模型+JSON请求体接收：

  from pydantic import BaseModel
  from fastapi import FastAPI
  
  app = FastAPI()
  
  class LoginRequest(BaseModel):
      username: str
      password: str
  
  @app.post("/api/login")
  async def login(request: LoginRequest):
      return {"username": request.username}
  

  这种情况前端必须传JSON格式，且请求头Content-Type设为application/json（对应上面的正确写法）。

• 如果后端用Form表单接收参数：

  from fastapi import FastAPI, Form
  
  app = FastAPI()
  
  @app.post("/api/login")
  async def login(username: str = Form(...), password: str = Form(...)):
      return {"username": username}
  

  这种情况前端不能传JSON，必须用FormData传递：

  const formData = new FormData();
  formData.append('username', 'yourname');
  formData.append('password', 'yourpass');
  
  fetch('/api/login', {
    method: 'POST',
    body: formData
  });
  

  注意：使用FormData时无需手动设置Content-Type，浏览器会自动添加正确的multipart/form-data头。

3. 参数名称大小写/拼写不一致 #

检查前端传递的字段名和后端定义是否完全一致，比如前端传userName但后端模型里是username，或者拼写错误（如usrname），都会导致服务端识别不到字段。

4. 请求头设置错误 #

确保Content-Type头拼写完全正确，不要写成content-type（虽然大部分服务端能识别，但HTTP头严格来说大小写敏感），也不要写错格式（标准格式为application/json）。

另外，若使用代理工具（如create-react-app的代理），检查是否有中间件修改了请求体或请求头，导致参数丢失。

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