FastAPI Cookie が React フロントエンドに到達しないのはなぜですか?

React フロントエンドの FastAPI Cookie の問題

問題

POST リクエストを実行し、 DevTools を使用して応答ヘッダーに Cookie を追加するChrome。

解決策

問題を解決するには、次の手順に従います:

1. Axios リクエストの確認:

   Axios POST リクエストが正常に実行され、エラーが返されていないことを確認します。さらに、応答に 'status': 'success' と 200 ステータス コードが含まれていることを確認します。

2. Set Credentials in Axios Request:

   React フロントエンドと FastAPI バックエンドは異なるポートを使用しているため、クロスオリジン リクエストが行われます。 Cookie の転送を有効にするには、Axios リクエストで withCredentials プロパティを true に設定します:

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

3. FastAPI ミドルウェアの資格情報を許可する:

   クロスオリジンリクエストの場合、明示的に許可しますCORSMiddleware を使用して FastAPI ミドルウェアの認証情報を取得し、allow_credentials=True を設定します。これにより、Access-Control-Allow-Credentials 応答ヘッダーが true に設定されます。

4. 許可されたオリジンの指定:

   指定ORIGINS を使用して許可されるオリジン (ワイルドカード * を除く)。これにより、特定のドメインのみに Cookie の送信が許可されます。

5. Set Cookie HTTPOnly:

   FastAPI コードで、httponly パラメータを次のように設定します。 Cookie を設定する場合は True。これにより、JavaScript が Cookie にアクセスできなくなり、セキュリティが強化されます。

6. CORS ミドルウェアの構成:

   CORSMiddleware を FastAPI アプリに追加し、次のように構成します。 React フロントエンドによって使用されるオリジンを許可し、資格情報を許可し、すべてのメソッドを許可します。 headers.

7. ブラウザ設定の確認 (ローカルホストのテストのみ):

   ローカルホスト経由で React フロントエンドにアクセスする場合は、Axios POST リクエストでURL 内の「127.0.0.1」ではなく「localhost」。これらは異なるものとみなされます。

これらの手順を実装すると、FastAPI は React フロントエンドに Cookie を正しく返し、フロントエンドとバックエンド間の安全で認証された通信が可能になります。

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