JSON データを JavaScript フロントエンドから FastAPI バックエンドに正しく送信するにはどうすればよいですか?

JavaScript フロントエンドから FastAPI バックエンドへの JSON データの投稿

問題の理解

しようとするとエラーが発生しますJSON ペイロードを JavaScript フロントエンドから FastAPI バックエンドに渡します。具体的には、グラフを生成するためにクライアント入力フォームから「ethAddress」値を渡そうとしています。

問題への対処

エラーが発生するのは、FastAPI が原因です。エンドポイントは、「ethAddress」パラメータを JSON 本文の一部としてではなくクエリ パラメータとして期待します。したがって、解決策は、JSON ペイロードを処理できるように FastAPI エンドポイントを変更することです。

解決策: JSON ペイロードの処理

オプション 1: Pydantic モデルを使用する

• ピダンティックを作成するリクエスト本文を表すモデル:

from pydantic import BaseModel

class EthAddressModel(BaseModel):
    eth_addr: str

• Pydantic モデルを想定するようにエンドポイントを変更します:

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

オプション 2: を使用するBody パラメータ

• を直接「ethAddress」パラメータに本文パラメータとして注釈を付けます:

from fastapi import Body

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

オプション 3: Body(embed=True) 修飾子の使用

• Body(embed=True) 修飾子を使用して、リクエスト本文全体を単一の 1 つに解析します。パラメータ:

from fastapi import Body

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

変更された JavaScript コード

JSON 本文を正しく送信するように JavaScript フェッチ リクエストを変更します:

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

結論

によってこれらのソリューションのいずれかを採用すると、FastAPI バックエンドが JavaScript フロントエンドから JSON ペイロードを正しく受信して処理できるようになり、チャートの生成に「ethAddress」値を渡して使用できるようになります。

以上がJSON データを JavaScript フロントエンドから FastAPI バックエンドに正しく送信するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。