クロスオリジン API 応答から Cookie を設定できないのはなぜですか?

クロスオリジン HTTP Cookie 管理: ヘッダーの問題の解決

Web 開発では、クロスオリジン応答から HTTP Cookie を設定および取得することで、挑戦してください。この状況は、フロントエンド アプリケーションが、別のドメインから提供されるバックエンド API と通信している場合に発生します。

この問題は、最新のブラウザーによって適用される同一オリジン ポリシーによって発生し、次のドメインからのリソースへのアクセスが制限されます。異なる起源。クロスオリジン要求が行われると、ブラウザーは通常、応答内の Set-Cookie ヘッダーの尊重を拒否し、Cookie がローカルに保存されなくなります。

シナリオ

フロントエンド アプリケーションが認証のためにリフレッシュ トークンを設定する必要があるこの特定のケースを考えてみましょう。バックエンド API は予想どおり Set-Cookie ヘッダーを送信していますが、フロントエンドはそれを受信して​​保存できません。

Axios Request Configuration

コードフロントエンドからリクエストを送信するために提供されるヘッダー オブジェクトには withCredentials プロパティが含まれます。これはこのプロパティの正しい場所ではありません。 withCredentials は、ヘッダーではなく、axios インスタンス自体のプロパティとして設定する必要があります。

解決策

withCredentials をプロパティに移動することで、ヘッダーではなく axios インスタンスの場合、ブラウザーはクロスオリジン応答からの Set-Cookie ヘッダーを適切に尊重します。クッキーをローカルに保存します。これにより、フロントエンド アプリケーションは、認証を目的とした後続のリクエストで API に Cookie を送信できるようになります。

以上がクロスオリジン API 応答から Cookie を設定できないのはなぜですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。