Angular使用HttpParams调用FastAPI接口报422 Unprocessable Entity错误

错误原因 #

你遇到的422状态码是FastAPI的参数校验失败错误，问题出在前后端参数传递的位置不匹配：

1. Angular的HttpClient.post方法参数规则为 post(url: string, body: any, options?: Object)，你现在把用来定义查询参数的HttpParams作为第二个参数（请求体）传递，导致name参数被放到了请求体中
2. 后端FastAPI接口中，name参数没有加Body装饰器，默认从URL查询参数中取值，自然无法读取请求体里的参数，就返回了参数缺失的422错误。

解决方案 #

两种修正方案选一种即可：

方案1：保持后端逻辑不变，前端调整参数传递位置 #

调整Angular服务中的请求方法，将HttpParams放到第三个参数的params配置项中，空对象作为占位的请求体：

public updateStateUser(username): Observable<any> {
  let params = new HttpParams()
    .append('name', username)      
  return this.http.post('http://127.0.0.1:8000/admin/enable_disable_account', {}, {
    params: params
  })
}

方案2：调整后端接收参数的方式，从请求体取值 #

适合后续接口扩展参数的场景，先修改FastAPI接口，显式声明name从请求体获取：

from fastapi import Body

@router.post("/enable_disable_account")
async def enable_disable_account(name: str = Body(), current_user: User = Security(get_current_user, scopes=["admin"])):           
  result = await admin_db.enable_disable_account(name)
  if result:
    return JSONResponse(status_code=status.HTTP_200_OK, content='ok')

对应修改前端请求方法，直接把参数放到请求体中：

public updateStateUser(username): Observable<any> {
  return this.http.post('http://127.0.0.1:8000/admin/enable_disable_account', {
    name: username
  })
}

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