How to Correctly Send JSON Data from a JavaScript Frontend to a FastAPI Backend?

Posting JSON Data from JavaScript Frontend to FastAPI Backend

Understanding the Issue

You're encountering errors when attempting to pass a JSON payload from your JavaScript frontend to your FastAPI backend. Specifically, you're trying to pass an "ethAddress" value from a client input form to generate a chart.

Addressing the Issue

The error occurs because your FastAPI endpoint expects the "ethAddress" parameter as a query parameter rather than as part of the JSON body. Therefore, the solution lies in modifying your FastAPI endpoint to handle JSON payloads.

Solution: Handling JSON Payloads

Option 1: Using a Pydantic Model

• Create a Pydantic model to represent the request body:

from pydantic import BaseModel

class EthAddressModel(BaseModel):
    eth_addr: str

• Modify your endpoint to expect the Pydantic model:

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

Option 2: Using the Body Parameter

• Directly annotate the "ethAddress" parameter as a body parameter:

from fastapi import Body

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

Option 3: Using the Body(embed=True) Modifier

• Use the Body(embed=True) modifier to parse the entire request body into a single parameter:

from fastapi import Body

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

Modified JavaScript Code

Modify your JavaScript fetch request to send the JSON body correctly:

fetch("http://localhost:8000/ethAddress", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ eth_addr: "your_eth_address" }),
}).then(fetchEthAddresses);

Conclusion

By employing one of these solutions, you can enable your FastAPI backend to correctly receive and process JSON payloads from your JavaScript frontend, allowing you to pass and use the "ethAddress" value for generating your chart.

The above is the detailed content of How to Correctly Send JSON Data from a JavaScript Frontend to a FastAPI Backend?. For more information, please follow other related articles on the PHP Chinese website!