fetch调用FastAPI POST接口报422错误的原因与解决

问题相关初始代码 #

前端JavaScript请求代码 #

const submitHandler = async (e) => {
    const user = document.getElementById("email").value;

    await fetch('https://clownfish-app-fqu4k.ondigitalocean.app/meadow', {
        method: "POST",
        headers: "content-type": "application/json",
        body: user,
    })
}

后端FastAPI接口代码 #

from fastapi import FastAPI
from pydantic import BaseModel
from fastapi.middleware.cors import CORSMiddleware

app = FastAPI()

app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)


class User(BaseModel):
    email: str


@app.post("/meadow")
def password_validation(user: User):
    return {
        "status": "success",
        "data": user
    }

问题排查过程 #

• 上述接口在Postman工具中测试可正常运行，但在Chrome浏览器中发起请求时出现报错，初始报错截图如下：
  
• 初步调整代码后问题仍未解决，请求返回*422 Unprocessable Entity（不可处理实体）*状态码。期间曾尝试使用FormData类传参、在fetch请求头中添加accept字段，均未生效。
• 后续抓取到请求返回的具体错误信息：

{"detail":[{"loc":["body"],"msg":"value is not a valid dict","type":"type_error.dict"}]}

• 根因定位：该错误说明请求传参格式不符合后端Pydantic模型的解析要求，属于前端开发新手常见疏漏：一是原有代码中headers字段写法存在语法错误，未按要求传入对象结构；二是发送请求前未对请求体数据执行JSON.stringify序列化处理，且请求体结构未匹配后端模型要求，导致后端无法将入参解析为合法字典格式。

修复方案 #

调整前端fetch请求逻辑，修正headers语法，将请求体封装为匹配后端User模型的结构后做JSON序列化，修正后的代码如下：

const submitHandler = async (e) => {
    // 若为表单提交场景，需先阻止默认跳转行为
    e.preventDefault();
    const emailVal = document.getElementById("email").value;

    await fetch('https://clownfish-app-fqu4k.ondigitalocean.app/meadow', {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({
            email: emailVal
        }),
    })
}

注意：当前后端接口定义为接收JSON格式的请求体，不需要使用FormData传参，使用FormData反而会因为格式不匹配触发解析错误。

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