CORS: クロスドメイン リクエストの「プリフライト」リクエストを理解する

クロスオリジン リソース共有 (CORS) が HTTP を作成する際に課題を引き起こすドメイン間のリクエスト。これらの制限に対処するために、回避策としてプリフライト リクエストが導入されました。

プリフライト リクエストの説明

プリフライト リクエストは、実際のリクエスト (GET や POST など) に先行する OPTIONS リクエストです。 ）、リクエストの権限に関してサーバーとネゴシエートする役割を果たします。これらのリクエストには 2 つの追加ヘッダーが含まれます:

• Access-Control-Request-Method: 実際のリクエストのメソッドを指定します。
• Access-Control -Request-Headers: 実際のリクエストに含まれるヘッダーをリストします。

サーバー応答の構成

プリフライト リクエストを処理するには、サーバーは次のヘッダーで応答する必要があります:

• Access-Control-Allow-Origin: リクエストで指定されたオリジンにアクセス許可を与えます。
• ]Access-Control-Allow-Methods: 実際のリクエストに許可されるメソッドを指定します。
• Access-Control-Allow-Headers: ブラウザーに許可されるヘッダーをリストします。実際のリクエストを送信します。

クライアント側のプリフライト実装

プリフライト リクエストが成功するには、クライアントに次の変更を含める必要があります。

• OPTIONS リクエストを送信します: 実際のリクエストの前に、適切な Access-Control-Request-* ヘッダーを付けて OPTIONS リクエストを送信します。
• 必要な情報を含めますheaders: 実際のリクエストに、Access-Control-Allow-Headers 応答ヘッダーで指定されたすべてのヘッダーが含まれていることを確認してください。

例:

リモート URL からデータをフェッチする POST リクエストのプリフライト リクエストを考えてみましょう。

プリフライト リクエスト:

• Origin: https://yourdomain.com
• Access-Control-Request-Method: POST
• Access-Control-Request-Headers: X-Custom-Header

サーバー応答 (POST を想定)および X-Custom-Header は許可されます):

• Access-Control-Allow-Origin: https://yourdomain.com
• Access-Control-Allow-Methods : POST
• Access-Control-Allow-Headers: X-Custom-Header

実際のリクエスト:

• 送信元: https://yourdomain.com
• Method: POST
• X-Custom-Header: value

次の手順に従うことで、HTTP リクエストを効果的にプリフライトできます。 CORS を使用してクロスドメインの制限を克服します。