なぜブラウザはCORSでプリフライト（OPTIONS）リクエストを送信するのですか？
ブラウザは、カスタムヘッダー（Authorizationなど）やapplication/jsonを含む非単純リクエスト（Non-Simple Request）を送信する前に、サーバー側がそのメソッドやヘッダーを安全に受け入れられるかを確認するためにOPTIONSプリフライトを送信します。
Detailed Technical Explanation
CORSのプリフライト仕様は、クロスオリジン通信を想定していなかったレガシーなWebサーバーを保護するためにW3Cによって設計されました。GET/POSTであってもapplication/jsonを指定したSPAのAPI呼び出しは非単純リクエストとみなされ、ブラウザが本番リクエスト前にOPTIONSプローブを送信します。このオーバーヘッドはAccess-Control-Max-Ageヘッダーでキャッシュ可能です。
Technical Example & Code
ブラウザがAccess-Control-Request-*ヘッダーを送信し、サーバーが許可設定を返します。
// 1. Browser sends Preflight Request:
OPTIONS /api/orders HTTP/1.1
Host: api.example.com
Origin: https://app.curious-techie.com
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type, authorization
// 2. Server approves the interaction:
HTTP/1.1 204 No Content
Access-Control-Allow-Origin: https://app.curious-techie.com
Access-Control-Allow-Methods: GET, POST, OPTIONS
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Max-Age: 86400
// 3. Browser now automatically sends the actual POST request!Why This Is the Case (Underlying Architectural Rationale)
"予期しないクロスオリジンPOSTやPUTによるサーバー側の副作用（データベース更新など）を、クライアント側が勝手にトリガーすることを未然に防ぐためです。"
Common Misconception vs Reality
"CORSプリフライトはサーバーを攻撃者のcURLやスクリプトから防ぐセキュリティ機能である。"
CORSはブラウザ専用のセキュリティ境界であり、cURLやPythonなどのバックエンドツールはプリフライトを行わずCORSポリシーも無視します。
Related Curious-Techie Resources
How to Fix CORS Preflight Errors: Step-by-Step Guide →
Diagnose and resolve preflight 403 Forbidden errors, missing headers, and proxy redirection bugs.
Interactive ToolCORS Checker & Header Generator →
Test preflight OPTIONS handling and generate production-ready Express and Nginx CORS rules.
Developer ReferenceCORS Headers Reference & Specifications →
Related Questions in the Q&A Knowledge Base
CORS allows standard GET requests without a preflight check for backward compatibility with the legacy web. Because HTML tags like `<form>`, `<img>`, and `<script>` have always been able to issue cross-origin GET requests without pre-approval, requiring preflights for all GETs would have broken decades of existing web architecture.
HTTP 401 Unauthorized means the user is not authenticated (identity unknown; credentials missing or invalid), whereas HTTP 403 Forbidden means the user is authenticated (identity known), but lacks the necessary permissions to access the requested resource.
Using 'unsafe-inline' in a Content Security Policy defeats XSS protection because it instructs the browser to execute any inline script found in the HTML. Since Cross-Site Scripting works by injecting malicious inline script tags or event handlers, 'unsafe-inline' allows the attacker's payload to run freely.
関連技術エコシステムと次の学習ステップ
関連技術解説記事
What Is CORS (Cross-Origin Resource Sharing)?
The standard protocol enabling controlled cross-origin data access in modern browsers.
CSP vs CORS: Differences in Browser Defense Mechanisms
Distinguishing outbound resource loading restrictions from inbound server access control.
Troubleshooting: No Access-Control-Allow-Origin Header Present
Diagnose and fix the most common browser cross-origin blocking error with production configs.
実践ハンズオン診断ラボ
開発者向け規格・仕様リファレンス
次のステップへ進む
CORS Policy & Preflight Handshake Lab
Simulate preflight OPTIONS probes and adjust Access-Control-Allow-* headers inside the browser sandbox.