FastAPI电商项目表单提交购物车时出现422错误排查

核心问题 #

你遇到的422错误，本质是前端表单提交的数据格式和FastAPI接口期望的格式不匹配：

• Swagger UI发送的是JSON格式请求体，完全符合你用Pydantic模型接收请求体的要求，所以能正常写入数据库；
• 但HTML表单默认提交的是application/x-www-form-urlencoded格式（键值对形式），FastAPI默认会将请求体解析为JSON对象，自然会触发"value is not a valid dict"错误。

两种解决思路 #

思路1：修改FastAPI接口，支持表单格式接收参数 #

把原来接收JSON请求体的Pydantic模型，改成用Form类接收表单参数。示例如下：

# checkout.py 修改前
from fastapi import FastAPI
from pydantic import BaseModel

app = FastAPI()

class OrderModel(BaseModel):
    product_id: int
    quantity: int

@app.post("/checkout")
async def checkout(order: OrderModel):
    # 写入数据库逻辑
    return {"status": "success"}

# 修改后
from fastapi import FastAPI, Form

app = FastAPI()

@app.post("/checkout")
async def checkout(product_id: int = Form(...), quantity: int = Form(...)):
    # 可将参数组装为原Pydantic模型实例
    # order = OrderModel(product_id=product_id, quantity=quantity)
    # 写入数据库逻辑
    return {"status": "success"}

如果你的Pydantic模型字段较多，也可以用依赖类封装表单参数：

from fastapi import Depends, Form
from pydantic import BaseModel

class OrderModel(BaseModel):
    product_id: int
    quantity: int

async def get_order_form(
    product_id: int = Form(...),
    quantity: int = Form(...),
) -> OrderModel:
    return OrderModel(product_id=product_id, quantity=quantity)

@app.post("/checkout")
async def checkout(order: OrderModel = Depends(get_order_form)):
    # 写入数据库逻辑
    return {"status": "success"}

思路2：修改前端表单，用JS发送JSON格式请求 #

保留FastAPI的JSON接收逻辑，修改前端页面，阻止表单默认提交行为，用JavaScript将表单数据转为JSON后发送：

<!-- index.html 修改表单部分 -->
<form id="checkoutForm">
    <input type="number" name="product_id" required>
    <input type="number" name="quantity" required>
    <button type="submit">提交购物车</button>
</form>

<script>
const form = document.getElementById('checkoutForm');
form.addEventListener('submit', async (e) => {
    e.preventDefault(); // 阻止默认表单提交行为
    const formData = new FormData(form);
    const jsonData = Object.fromEntries(formData.entries());
    // 转换为Pydantic模型要求的数字类型
    jsonData.product_id = parseInt(jsonData.product_id);
    jsonData.quantity = parseInt(jsonData.quantity);
    
    const response = await fetch('/checkout', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(jsonData),
    });
    
    const result = await response.json();
    console.log(result);
});
</script>

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