React フロントエンドが FastAPI バックエンドからの POST データを表示しないのはなぜですか?

React が FastAPI バックエンドからの POST 応答を表示しない: CORS のトラブルシューティング

この問題では、React フロントエンドは、FastAPI バックエンドからの POST 応答を表示できません。 FastAPI バックエンド。問題は CORS (Cross-Origin Resource Sharing) の制限にあり、FastAPI バックエンドで設定する必要があります。

CORS と FastAPI

CORS はクロスオリジン リクエストを制限するメカニズムです。 React フロントエンドから FastAPI バックエンドへの送信など。これは、セキュリティ リスクを軽減し、ユーザー データを保護するために行われます。 CORS を有効にするには、フロントエンド オリジンからのリクエストを許可するように FastAPI アプリケーションを構成する必要があります。

FastAPI での CORS の構成

FastAPI で CORS を有効にする推奨方法の 1 つは、CORSMiddleware を使用することです。以下に例を示します:

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

app = FastAPI()

origins = ["http://localhost:3000", "http://127.0.0.1:3000"]

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

このミドルウェアを追加すると、指定された送信元 (この場合、localhost:3000) からのリクエストが許可され、Cookie、メソッド、およびヘッダーに対するアクセス許可が提供されます。

問題の解決

問題を解決するには、FastAPI バックエンドで CORS が上記のように構成されていることを確認してください。 CORS が有効になると、React フロントエンドはバックエンドと通信し、POST リクエストから受信したデータを表示できるようになります。

以上がReact フロントエンドが FastAPI バックエンドからの POST データを表示しないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。