FastAPI用Pydantic接收POST请求时浏览器返回422错误如何解决

问题原因 #

• 1 前端fetch请求的请求头配置错误：原生fetch API 没有contentType、dataType这两个配置项，这是jQuery ajax的语法，导致请求没有正确携带Content-Type: application/json头。FastAPI接收Pydantic参数时需要自动从请求体解析JSON，缺少正确的头会导致解析失败，返回422。而你用Request对象手动调用request.json()解析时不受这个影响，所以能正常返回。
• 2 Pydantic模型存在类型不匹配隐患：你的Item模型中tax字段声明为Optional[float]类型，但默认值设置为字符串'N/A'，类型不匹配，即使请求参数正确，当未传tax字段时也会触发校验错误。

解决方法 #

1 修改前端fetch配置 #

把两个fetch请求的配置替换为正确的请求头写法：

// 两个请求都要做相同修改，以下以test_pydantic的请求为例
fetch('http://127.0.0.1:8000/test_pydantic', {
    method: 'POST',
    body: JSON.stringify(person),
    // 新增正确的headers配置，删除原有的contentType、dataType参数
    headers: {
        'Content-Type': 'application/json'
    }
}).then(function(respones) {
    return respones.json();
}).then(function(data) {
    console.log('Using pydantic', data);
})

2 修正Pydantic模型的类型匹配 #

根据你的业务需求二选一调整即可：

# 方案1：如果tax为空时用None作为默认值
class Item(BaseModel):
    name: str
    description: Optional[str] = None
    price: float
    tax: Optional[float] = None

# 方案2：如果确实需要支持'N/A'作为有效值，调整字段类型声明
from typing import Union
class Item(BaseModel):
    name: str
    description: Optional[str] = None
    price: float
    tax: Union[float, str, None] = 'N/A'

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