プリフライトリクエストとは

プリフライトリクエストとは？

一般的なブラウザのリクエストには、POST、GET、PUT、DELETE などがあります。しかし、OPTIONS というリクエストタイプがあることに気づいたことはありますか？

一般的に、プリフライトリクエストとは、OPTIONSリクエストのことを指します。これは、ブラウザが、これから行われるリクエストがサーバーに予測できない影響を与える可能性があると判断した場合に、自動的に送信されます。プリフライトリクエストを通じて、ブラウザは、これから行われるリクエストをサーバーが許可するかどうかを判断できます。許可された場合にのみ、ブラウザは実際のリクエストを実行します。

通常、プリフライトリクエストは、ユーザーの管理や介入を必要としません — ブラウザとサーバーによって自動的に処理されます。

プリフライトリクエストは通常、次のようになります。

Access-Control-Request-Headers: x-requested-with
Access-Control-Request-Method: POST
Origin: http://preflight.example.com

このリクエストの3つの主要なフィールドは次のとおりです。

Origin – リクエストの送信元を表します。
Access-Control-Request-Method – リクエストされる実際のHTTPメソッドを指定します。
Access-Control-Request-Headers – 実際のリクエストヘッダーをリストします。

プリフライトリクエストへの応答は通常、次のようになります。

Access-Control-Allow-Headers: Content-Type, Content-Length, Authorization, Accept, X-Requested-With
Access-Control-Allow-Origin: http://preflight.example.com
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Max-Age: 86400

応答の最も重要なフィールドは次のとおりです。

Access-Control-Allow-Origin – リソースへのアクセスが許可されているオリジンを指定します。
Access-Control-Allow-Headers – 許可されているカスタムリクエストヘッダーをリストします。
Access-Control-Allow-Methods – 許可されているHTTPメソッドを指定します。

実際のリクエストのいずれかの側面が許可範囲に収まらない場合、ブラウザは自動的にリクエストをキャンセルし、CORSエラーをスローします。

最後のフィールドである Access-Control-Max-Age は、プリフライトリクエストの寿命を定義します。この期間中、ブラウザは同じリクエストに対して別のプリフライトリクエストを送信しません。

プリフライトリクエストがトリガーされるのはいつですか？

プリフライトリクエストは、CORS（Cross-Origin Resource Sharing）仕様の一部であり、すべての最新ブラウザが実装しています。ただし、一部のブラウザは、追加の機能で標準を拡張しています。

MDNによると、プリフライトリクエストのトリガーを回避するには、5つの条件すべてが満たされている必要があります。これらの条件のいずれかが満たされない場合、ブラウザは、予測できないサーバーの動作を防ぐために、実際のリクエストを実行する前にプリフライトリクエストを送信します。

5つの条件は次のとおりです。

リクエストメソッドの制限 – リクエストメソッドは、GET、POST、HEADである必要があります。
リクエストヘッダーの制限 – 次の9つヘッダーのみが許可されています。

Accept
Accept-Language
Content-Language
Content-Type
DPR
Downlink
Save-Data
Viewport-Width
Width

Content-Typeの制限 – Content-Type は、次のいずれかである必要があります。

text/plain
multipart/form-data
application/x-www-form-urlencoded

XMLHttpRequestUploadオブジェクトの制限 – XMLHttpRequestUploadオブジェクトにイベントリスナーを登録しないでください。
ReadableStreamオブジェクトの制限 – リクエストにReadableStreamオブジェクトを含めてはなりません。

ほとんどの開発者にとって、主な制約は最初の3つのルールです。プリフライトリクエストの最も一般的なトリガーは次のとおりです。

カスタムリクエストヘッダーの使用
許可されたタイプにない Content-Type の使用

プリフライトリクエストが存在するのはなぜですか？

プリフライトリクエストが何か、そしてそれがいつトリガーされるかを理解したので、それがなぜ設計されたのかを探りましょう。

プリフライトリクエストはCORSの不可欠な部分であり、クロスオリジンアクセスを制限することにより、Webセキュリティを強化するのに役立ちます。

CORSがない場合、明示的に制限されていない限り、すべてのWebリソースはどのWebサイトからでもアクセスできます。例:

WebサイトAは、JavaScriptを使用してWebサイトBのCookie およびプライベートデータにアクセスできます。
WebサイトBは、WebサイトAに対して同じことができます。

CORSは、デフォルトで不正なクロスオリジンリクエストを防ぎます。 ホワイトリストに登録されたオリジン、メソッド、およびヘッダーのみが、保護されたリソースにアクセスできます。このセキュリティモデルにより、保護を必要とするWebサイトは、クロスオリジンアクセスが必要な場合に柔軟性を維持しながら、アクセスを制御できます。

プリフライトリクエストは、次のことによってセキュリティリスクを防ぐのに役立ちます。

サーバーが実行する前にクロスオリジンリクエストを明示的に許可することを確認します。
CORSをサポートしていない古いサーバーが、機密データが公開される前に不正なリクエストをブロックできるようにします。

CORSセキュリティメカニズムに関心がある場合は、詳細についてMDNのドキュメントを参照してください。

プリフライトリクエストを適切にサポートする方法

あなたがバックエンド開発者の場合、プリフライトリクエストを適切に処理するためにサーバーを構成する必要があるかもしれません。

プリフライトリクエストをサポートするには、3つの主要な応答ヘッダーに焦点を当てます。

Access-Control-Allow-Origin

これは、リソースへのアクセスが許可されているオリジンを指定します。
APIがパブリック（例：画像アップロードサービス）の場合、これを "*" （すべてのオリジンを許可する）に設定できます。
しかし、 "*" を使用すると セキュリティが低下するため、一般的に推奨されません。

Access-Control-Allow-Headers

これは、許可されているカスタムリクエストヘッダーを指定します。
サーバーは、サポートするヘッダーのみを明示的にリストする必要があります。

Access-Control-Allow-Methods

これは、許可されているHTTPメソッドを指定します。
"*" の代わりに、必要なメソッドのみをリストする方が安全です。

推奨される構成：

ctx.set('Access-Control-Allow-Origin', '<allowed-origin>');
ctx.set('Access-Control-Allow-Credentials', true);
ctx.set('Access-Control-Max-Age', 86400000);
ctx.set('Access-Control-Allow-Methods', 'OPTIONS, HEAD, <actual-method>');
ctx.set(
  'Access-Control-Allow-Headers',
  'Content-Type, Content-Length, Authorization, Accept, X-Requested-With'
);

さらに、バックエンドフレームワークで router.post() または他の省略形メソッドを使用している場合、ブラウザが正しく処理できるように、OPTIONSリクエストを明示的に処理する必要があります。

一般的なアプローチは、OPTIONSリクエストに対して**HTTP 200（OK）またはHTTP 204（No Content）**を返すことです。

if (ctx.request.method === 'OPTIONS') {
  ctx.response.status = 204;
}

注： 2xxステータスコードは許容されますが、204 No Contentが最も一般的な選択肢です。

プリフライトリクエストとCORSの関係

MDNによると、プリフライトリクエストはCORS標準の一部です。 これらは、リクエストがクロスオリジンである場合にのみ発生します。

これは、次のことを意味します。

クロスオリジンリクエストが常にプリフライトリクエストをトリガーするとは限りません。
プリフライトリクエストが発生した場合、そのリクエストは間違いなくクロスオリジンです。

プリフライトリクエストはクロスオリジンの相互作用を保護するために存在するため、これは理にかなっています。 同じオリジン内では、バックエンドおよびフロントエンドの開発者は通常、APIセキュリティについて相互に理解しているため、プリフライトチェックは不要です。

これは、セキュリティと利便性のバランスを取るための典型的な例です — 開発を過度に制限することなく、セキュリティを向上させる妥協点を選択します。

Leapcellを選んで、バックエンドプロジェクトのホストに最適です。

Leapcell は、Webホスティング、非同期タスク、およびRedisのための次世代サーバーレスプラットフォームです。

多言語サポート

Node.js、Python、Go、または Rust で開発します。

無制限のプロジェクトを無料でデプロイ

使用量に対してのみ支払い — リクエストなし、課金なし。

他に類を見ない費用対効果

アイドル課金なしの従量課金制。
例：25ドルで平均応答時間60ミリ秒で694万件のリクエストをサポートします。

合理化された開発者エクスペリエンス

簡単なセットアップのための直感的なUI。
完全に自動化されたCI/CDパイプラインとGitOps統合。
実用的な洞察を得るためのリアルタイムメトリクスとロギング。

簡単なスケーラビリティと高いパフォーマンス

高い同時実行性を容易に処理するための自動スケーリング。
運用上のオーバーヘッドはゼロ — 構築に集中するだけです。

詳細については、ドキュメントをご覧ください。

Xでフォローしてください：@LeapcellHQ

プリフライトリクエストとは