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

FastAPI Cookie が React フロントエンドで受信されない: 解決策

FastAPI をバックエンドとして使用し、React をフロントエンドとして AJAX リクエストを介して通信する場合、Cookie FastAPI で設定された情報を React が受信できない場合があります。この一貫性のない動作は、両方のアプリケーションで使用される異なるポート番号が原因である可能性があり、クロスオリジン要求シナリオが作成されます。

この問題に対処するには、次のいくつかの手順が必要です。

1. FastAPI で Cookie を正しく設定する:
   FastAPI で Cookie がエラーなく作成され、設定されていることを確認します。応答に 'status': 'success' と 200 ステータス コードが含まれていることを確認します。

2. React で Cookie の受け入れを有効にする:
   React で Axios リクエストを構成します。アプリは withCredentials プロパティを true に設定して Cookie を受信します。これは、Cookie などの認証情報を含むクロスオリジン リクエストに必要です。

   たとえば、Axios の場合:
   await axios.post(url, data, {withCredentials: true}))

   Fetch API:
   fetch('https://example.com', { credentials: 'include' });

3. FastAPI で許可されるオリジンを指定する:
   リクエストのクロスオリジンの性質のため、API へのアクセスを許可するオリジンを明示的に指定する必要があります。これには、React フロントエンドのドメインとポートが含まれます。
4. CORSMiddleware での資格情報の許可:
   FastAPI アプリケーションで、CORSMiddleware がallow_credentials を True に設定して構成されていることを確認します。これにより、Access-Control-Allow-Credentials ヘッダーが true に設定され、クロスオリジン応答に認証情報を含めることができるようになります。

これらの手順に従うことで、FastAPI は React フロントエンドに Cookie を正常に返すはずです。 Axios POST リクエストでエラーが返されず、Cookie が正しく設定されていることを必ず徹底的に確認してください。

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