FastAPI バックエンドが React フロントエンドに Cookie を送信しないのはなぜですか?

FastAPI が React フロントエンドに Cookie を返さない理由

React フロントエンド内で FastAPI バックエンドから Cookie を取得しようとすると、Cookie が返されていないことがわかる場合があります。実際に応答で期待される Cookie を受信します。この動作には、適切な Cookie の作成、資格情報送信の構成、正しい CORS (Cross-Origin Resource Sharing) セットアップなどのいくつかの要因が影響します。

Cookie を正しく設定する

デフォルトでは、FastAPI は次のことを行います。応答で Cookie を自動的に返しません。 Cookie を設定するには、応答オブジェクトの set_cookie() 関数を明示的に呼び出し、キー、値、および追加のオプション (max_age やexpires など) を指定する必要があります。 Axios POST リクエスト中にエラーがなく、ステータス コード 200 で成功したレスポンスを受け取ったことを確認します。

資格情報の送信

React フロントエンドが Cookie を受信するには、次の手順を実行します。 Axios リクエスト内で認証情報の送信を有効にする必要があります。 withCredentials プロパティを true に設定すると、リクエストで Cookie や認証ヘッダーなどの資格情報を送受信できるようになります。このプロパティは、サーバーから資格情報を受け取ることが予想されるすべてのリクエストに含める必要があります。

さらに、CORS リクエストの場合 (フロントエンドとバックエンドが異なるドメインまたはポートを使用する場合)、CORS 構成で資格情報の送信を明示的に許可する必要があります。 。これは、CORSMiddleware でallow_credentials オプションを True に設定することで実現できます。

CORS 構成

CORS 設定は、クロスオリジン要求を許可し、フロントエンドとバックエンド間の Cookie 送信を有効にする上で重要な役割を果たします。 。 FastAPI アプリケーションに CORS ミドルウェアが構成されており、allow_origins リストに React フロントエンドのオリジンが含まれていることを確認してください。

適切な Axios 構成

Axios リクエストには、true に設定された withCredentials オプションが含まれている必要があります。
await axios.post(url, data, { withCredentials: true })

Fetch API を使用する場合:
fetch('https://example.com', { credentials: 'include' })

次の手順に従うことで、 FastAPI バックエンドと React フロントエンドの間で Cookie を正常に設定および取得できるため、認証されたユーザーの処理とアクセス制御が可能になります。

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