React アプリが FastAPI バックエンドからの JSON データを表示しないのはなぜですか?

React アプリケーションで FastAPI バックエンドからの JSON データが表示されない

問題

React アプリケーションがローカルホストの FastAPI バックエンドから取得した JSON データの表示に失敗します。 8000/todo。データは受信されますが、React UI でレンダリングされません。

原因

この問題は、FastAPI バックエンドの Cross-Origin Resource Sharing (CORS) 構成の欠如によって発生します。デフォルトでは、ブラウザはセキュリティ リスクを防ぐためにクロスオリジン リクエストを制限します。

解決策

この問題を解決するには、FastAPI アプリケーションで CORS を有効にする必要があります。これは、CORSMiddleware を使用して実現できます。

例

次のコードは、FastAPI アプリケーションで CORS を有効にする方法を示しています。

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=["*"],
)

説明

CORSMiddleware は、指定されたオリジン (この例では http://localhost:3000 および http://127.0.0.1:3000) からのクロスオリジン リクエストを許可します。また、リクエストに Cookie を含めることも許可され (allow_credentials=True)、HTTP メソッドまたはヘッダーは制限されません (allow_methods=["*"]、allow_headers=["*"])。

追加情報

• CORS ヘッダー: CORS ミドルウェアによって設定された HTTP ヘッダーは、ブラウザーがクロスオリジン リクエストを処理する方法を制御します。たとえば、Access-Control-Allow-Origin ヘッダーは、リクエストに許可されるオリジンを指定します。
• Origin: オリジンとは、リクエストのプロトコル、ドメイン、およびポートを指します。異なるオリジンからのリクエストはクロスオリジン リクエストとみなされます。
• 同一オリジン ポリシー: デフォルトでは、ブラウザは同一オリジン ポリシーを適用し、セキュリティの脆弱性を防ぐためにクロスオリジン リクエストを制限します。 CORS は、このポリシーを緩和する方法を提供します。

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