Angular前端向FastAPI后端发Post请求返回422错误码如何解决

FastAPI返回422状态码的核心原因是请求体不符合后端Pydantic模型的校验规则，可按以下步骤逐一排查：

• 第一步：核对请求体结构
  你当前前端submit方法直接传递this.data作为请求体，但后端Login模型要求请求体必须是包含data字段的JSON对象，如果this.data本身是字符串值，直接传递会导致请求体不符合要求，修改代码如下：

  public submit(): any{
    this.httpClient.post<any>(
      this.endpoint,
      // 把数据包裹为带data字段的对象，匹配后端模型结构
      { data: this.data }
    ).subscribe()
  }
  

• 第二步：校验请求头配置
  Angular的HttpClient默认发送JSON请求时会自动携带Content-Type: application/json请求头，如果存在全局拦截器修改了请求头配置，会导致FastAPI无法正确解析JSON格式的请求体。可以打开浏览器开发者工具的「网络」面板，查看对应POST请求的请求头是否包含正确的Content-Type，若缺失可手动指定：

  import { HttpHeaders } from '@angular/common/http';
  
  public submit(): any{
    this.httpClient.post<any>(
      this.endpoint,
      { data: this.data },
      {
        headers: new HttpHeaders({
          'Content-Type': 'application/json'
        })
      }
    ).subscribe()
  }
  

• 第三步：查看具体错误详情
  FastAPI返回422错误时会在响应体的detail字段返回具体的错误原因，比如提示field required: data代表请求体缺少data字段，提示str type expected代表data字段类型不符合要求，根据错误提示可直接定位问题。也可以直接访问FastAPI自动生成的接口文档http://后端服务地址/docs，通过交互页面试请求，对比前端请求体和要求的结构差异。

• 第四步：核对字段类型匹配
  后端Login模型中data字段为字符串类型，如果前端传递的data值为数字、布尔值、对象等其他类型，也会触发校验失败，确保前端传递的data字段值为字符串类型即可。

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