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

FastAPI: React フロントエンドに Cookie を返せない

この問題は、FastAPI が React フロントエンドに Cookie を返せないときに発生します。 communication.

コード:

以下の Python スニペットは、Cookie を設定するための FastAPI コードを示しています:

@router.post("/login")
def user_login(response: Response, username: str = Form(), password: str = Form(), db: Session = Depends(get_db)):
    # code to authenticate and generate access token
    
    # set cookie
    response.set_cookie(key="fakesession", value="fake-cookie-session-value")
    
    return {"status": "success"}

React フロントエンドでは、 Axios を使用して送信していますリクエスト:

await axios.post(login_url, formdata)

トラブルシューティング:

1. Cookie 作成の確認:

   • Axios POST リクエストが成功し、「ステータス」を返すことを確認します。ステータス コード 200 の「成功」応答。

2. Axios で認証情報を有効にする リクエスト:

   • Set withCredentials: true Axios リクエストで、次のような資格情報の受信を許可します。 cookies.

3. CORS を設定します:

   • FastAPI (バックエンド) と React (フロントエンド)、FastAPI で CORS を有効にして、許可されたオリジンを指定します。認証情報の送受信を許可するには、allow_credentials=True を設定します。

4. 許可されたオリジンを指定します:

   • CORS 構成で、 React に許可されるオリジンを指定しますフロントエンド。

修正された Axios リクエスト:

await axios.post(login_url, formdata, {withCredentials: true})

追加の考慮事項:

• 同じドメイン: バックエンドとフロントエンドの両方が同じドメインを使用していることを確認します。 localhost と 127.0.0.1 を異なるドメインとして使用すると、Cookie の共有が防止されます。
• 明示的な Cookie 設定: FastAPI の response.set_cookie() 関数は、応答に明示的に Cookie を設定します。
• 認証情報には次のものが含まれます: ブラウザには認証情報が含まれていますfetch() で credentials: 'include' が指定されている場合、または Axios.

で withCredentials: true が指定されている場合のクロスオリジン リクエスト

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