Max-Ageでプリフライトキャッシュを最適化する

プリフライトキャッシュ — ラウンドトリップの削減

非シンプルなクロスオリジンリクエストはプリフライトOPTIONSリクエストをトリガーします。キャッシュなしでは、すべてのAPIコールのHTTPラウンドトリップが2倍になります。Access-Control-Max-Ageはブラウザにプリフライト結果をキャッシュする期間を指示します。

仕組み

1. ブラウザがAccess-Control-Request-MethodとAccess-Control-Request-Headers付きのOPTIONSリクエストを送信。
2. サーバーがAccess-Control-Allow-*ヘッダーとAccess-Control-Max-Age: Nで応答。
3. 次のN秒間、ブラウザは同一リクエスト（同じURL、メソッド、ヘッダー）のプリフライトをスキップ。

推奨値

シナリオ	Max-Age	理由
開発環境	0または5	CORS設定変更時の高速フィードバック
安定した内部API	3600（1時間）	鮮度とパフォーマンスのバランス
パブリック読み取り専用API	86400（24時間）	大量クライアントからのプリフライトトラフィックを最小化
ブラウザの上限	7200（2時間）	Chromiumはヘッダー値に関係なく7200秒で上限

ブラウザの制限

Max-Ageは86400まで設定できますが、Chromiumベースのブラウザはキャッシュを7200秒（2時間）で上限とすることに注意してください。Firefoxは86400まで尊重します。より高い値を設定してもFirefoxユーザーには有効で、Chromiumユーザーに悪影響はありません。

生成されるヘッダー

Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400
Vary: Origin

影響の測定

プリフライトリクエストを確認するには、DevTools > ネットワークを開き、メソッドOPTIONSでフィルタリングします。最初のプリフライト後、Max-Ageウィンドウ内の後続リクエストでは別のOPTIOSコールが生成されないはずです。