How to Fix '422 Unprocessable Entity' Errors When Sending JSON Data from JavaScript to FastAPI?

Troubleshooting JSON Post Requests from JavaScript to FastAPI

Introduction

When attempting to transfer JSON data from a JavaScript frontend to a FastAPI backend using a POST request, you may encounter error messages like "422 Unprocessable Entity." This article explores why this occurs and provides solutions to resolve the issue.

Error Analysis

The error indicates that your backend FastAPI endpoint is expecting a query parameter, not a JSON body. By default, non-path parameters in FastAPI endpoints are interpreted as query parameters.

Solution

There are multiple methods to address this issue and enable the posting of JSON data:

Option 1: Define a Pydantic Model

Create a Pydantic model to represent the JSON data, for example:

from pydantic import BaseModel

class Item(BaseModel):
    eth_addr: str

In your endpoint handler:

@app.post('/ethAddress')
def add_eth_addr(item: Item):
    return item

This requires the JSON body to be in the following format:

{
    "eth_addr": "some addr"
}

In your JavaScript fetch request:

//...
headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
},
body: JSON.stringify({
    "eth_addr": "some addr"
}),
//...

Option 2: Use FastAPI Body() Type

from fastapi import Body

@app.post('/ethAddress')
def add_eth_addr(eth_addr: str = Body()):
    return {'eth_addr': eth_addr}

This allows direct posting of the JSON data as a string:

"some addr"

In JavaScript:

//...
headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
},
body: JSON.stringify("some addr"),
//...

Option 3: Use FastAPI's Embed Feature (Recommended for Single Body Parameters)

from fastapi import Body

@app.post('/ethAddress')
def add_eth_addr(eth_addr: str = Body(embed=True)):
    return {'eth_addr': eth_addr}

This expects the JSON body in the same format as Option 2:

{
    "eth_addr": "some addr"
}

In JavaScript:

//...
headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
},
body: JSON.stringify({
    "eth_addr": "some addr"
}),
//...

Conclusion

By following these solutions, you can successfully post JSON data from your JavaScript frontend to your FastAPI endpoint. Remember to choose the approach that best suits your specific requirements.

The above is the detailed content of How to Fix '422 Unprocessable Entity' Errors When Sending JSON Data from JavaScript to FastAPI?. For more information, please follow other related articles on the PHP Chinese website!