FastAPI Cookie が React フロントエンドに表示されないのはなぜですか?

FastAPI: React フロントエンドでの Cookie の処理

概要

FastAPI により、バックエンド開発の Cookie 処理が可能になります。ただし、React フロントエンドで Cookie を送受信するには、適切な機能を確保するために特定の構成が必要な場合があります。

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

FastAPI バックエンドが React アプリに Cookie を返さない場合この問題にはいくつかの要因が考えられます:

1.無効な Axios リクエスト:

• withCredentials プロパティを true に設定して、Axios リクエストが認証情報を正しく送信していることを確認してください。
• Axios リクエストの URL がドメインと一致していることを確認してください。 FastAPI バックエンド。 localhost と 127.0.0.1 を異なるドメインとして使用すると、Cookie の作成が中断される可能性があります。

2. CORS の制限:

• クロスオリジン要求のため、FastAPI アプリケーションで CORS 設定を明示的に構成する必要があります。
• allow_credentials= で CORSMiddleware を使用して、許可されるオリジンを指定します。クロスオリジン Cookie を有効にする場合は True使い方。

3. FastAPI の Cookie 設定:

• response.set_cookie() メソッドを使用して、FastAPI ルートに Cookie が正しく設定されていることを確認します。
• httponly パラメータが次のように設定されていることを確認します。 True を指定すると、クライアント側で Cookie にアクセスできなくなります。

4. SameSite 属性:

• Cookie の SameSite 属性は、さまざまなドメイン間での可用性に影響を与える可能性があります。
• Cookie のアクセシビリティを制御するには、SameSite=Lax または SameSite=Strict に設定します。クロスサイトを防止する

FastAPI Cookie 設定のサンプル:

from fastapi import FastAPI, Response

app = FastAPI()

@app.get('/')
def main(response: Response):
    response.set_cookie(
        key='token',
        value='some-token-value', 
        httponly=True,
        samesite='Lax'  # or 'Strict'
    ) 
    return {'status': 'success'}

資格情報を含む Axios リクエストのサンプル:

await axios.post(url, data, {withCredentials: true}))

重要注:

• Access-Control-Allow-Origin にワイルドカード (*) を使用すると、通信の種類が制限され、Cookie と認証ヘッダーが送信されなくなる可能性があることに注意してください。
• フロントエンド ドメインが許可されたオリジンに明示的に含まれていること、および適切な Cookie に対してallow_credentials=True が設定されていることを確認します。取り扱い。

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