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

FastAPI は React フロントエンドに Cookie を送信できません

概要

FastAPI は、API を作成するための人気のある Python フレームワークです。ただし、一部のユーザーから、FastAPI が React フロントエンド アプリケーションに Cookie を返さないという問題が報告されています。

問題

FastAPI が React フロントエンド アプリケーションに Cookie を返さないのはなぜですか?

コード例

問題を説明するコード スニペットは次のとおりです。

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)) -> dict:
    # Database operations omitted for brevity
    access_token = create_access_token(data={"sub": user.mobile_number})
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    return {"status": "success"}

Swagger UI からのログイン要求の場合、Cookie は応答ヘッダーに表示されます。ただし、React アプリからは Cookie は返されません。

解決策

この問題を解決するには 2 つの手順があります:

1. 設定Cookie を正しく:

   • エラーがないことを確認してください
   • response.set_cookie(...) を使用して Cookie を正しく設定します。

2. 設定CORS と資格情報:

   • 設定により CORS リクエストを許可するCORSMiddleware では、origins とallow_credentials=True。
   • React アプリでは、Cookie を送信するために Axios リクエストで withCredentials: true を設定します。

説明

1. クッキー設定:

   • FastAPI 応答で Cookie が正しく設定されていることを確認します。正しいキー、値、httponly、およびその他の関連パラメーターが設定されていることを確認してください。

2. Cross-Origin Resource Sharing (CORS):

   • React と FastAPI は異なるポート上にあるため、CORS リクエストは
   • CORS で Cookie を許可するには、サーバーは Access-Control-Allow-Origin 応答ヘッダーを介して特定のオリジンを許可する必要があります。
   • FastAPI では、allow_credentials=True で CORSMiddleware を使用します。

3. の認証情報リクエスト:

   • React では、Axios リクエストで withCredentials: true を設定します。
   • これにより、FastAPI サーバーへの後続のリクエストで Cookie を送信するようブラウザに通知されます。

重要注

Cookie への不正アクセスを防ぐために、許可されるオリジンを明示的に指定してください。デフォルトでは、認証情報なしの CORS リクエストでは、Cookie を除く特定の通信タイプのみが許可されます。

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