CODEWITHSUNDEEP
javascriptpythonjsonfetchfastapi
chhenning
chhenning

Reputation: 2077

Unprocessable Entity when using pydantic on POST

I'm trying to POST some data to an API method using the browser. When I use fastAPI's Request object all is working. But when I use a pedantic model I get:

422 (Unprocessable Entity)

I have tested my code with curl and again all is working.

Here is my fastAPI:


from typing import Optional

from fastapi import FastAPI, Request
from fastapi.middleware.cors import CORSMiddleware

from pydantic import BaseModel

import uvicorn

app = FastAPI()

origins = ["*"]

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

class Item(BaseModel):
    name: str
    description: Optional[str] = None
    price: float
    tax: Optional[float] = 'N/A'

@app.post("/test_request")
async def create_item(request:Request):
  json = request.json()
  return await json

@app.post("/test_pydantic")
async def create_item(item:Item):
  return item

if __name__ == '__main__':
    uvicorn.run(app='main:app', reload=True, debug=True)

And here is my index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>test</h1>
    <script>
        const person = {
            name: 'XXX',
            description: 'XXX Desc',
            price:200,
            tax: 400123598
        }

        fetch('http://127.0.0.1:8000/test_request', {
            method: 'POST',
            body: JSON.stringify(person),
            contentType: "application/json",
            dataType: 'json',
        }).then(function(respones) {
            return respones.json();
        }).then(function(data) {
            console.log('Using request', data);
        })

        fetch('http://127.0.0.1:8000/test_pydantic', {
            method: 'POST',
            body: JSON.stringify(person),
            contentType: "application/json",
            dataType: 'json',
        }).then(function(respones) {
            return respones.json();
        }).then(function(data) {
            console.log('Using pydantic', data);
        })
</script>

</body>

</html>

When calling test_pydantic from the browser I get the 422.

Upvotes: 1

Views: 2464

Answers (1)

MatsLindh
MatsLindh

Reputation: 52832

You're not setting the correct content-type when calling fetch with the JSON data. The content-type header is under the headers key:

fetch('http://127.0.0.1:8000/test_pydantic', {
    method: 'POST',
    body: JSON.stringify(person),
    headers: {"content-type": "application/json"},
    dataType: 'json',
}).then(function(respones) {
    return respones.json();
}).then(function(data) {
    console.log('Using pydantic', data);
})

Upvotes: 1

Related Questions