CORS解説
Cross-Origin Resource Sharingの完全ガイド — 仕組み、すべてのヘッダーの解説、よくあるエラーと修正方法。
概要
CORSとは？
Cross-Origin Resource Sharing（CORS）は、HTTPヘッダーベースのメカニズムで、サーバーが自身以外のオリジン（ドメイン、スキーム、ポート）からブラウザがリソースの読み込みを許可すべきオリジンを示すことができます。ブラウザはデフォルトで同一オリジンポリシーを適用し、ページを提供したオリジンとは異なるオリジンへのリクエストをブロックします。
同一オリジンポリシー
2つのURLが同じスキーム（http/https）、ホスト、ポートを共有している場合、同じオリジンを持ちます。例えば、https://app.example.comとhttps://api.example.comはホストが異なるため、異なるオリジンです。同一オリジンポリシーは、悪意のあるサイトが別のサイトの機密データを読み取ることを防ぎます。CORSは、この制限を制御された方法で緩和するメカニズムです。
シンプルリクエスト vs. プリフライト
「シンプルリクエスト」はGET、HEAD、またはPOSTをCORSセーフリストのヘッダーのみで使用し、プリフライトをトリガーしません。それ以外のすべてのクロスオリジンリクエスト（PUTやDELETEなどのメソッドを使用するもの、またはAuthorizationなどのヘッダーを含むもの）はプリフライトをトリガーします。ブラウザは実際のリクエストを送信する前に、まずOPTIONSリクエストを送信してサーバーに許可を求めます。
CORSの仕組み
シンプルリクエスト
ブラウザ
GET /api/data
Origin: https://app.example.com
Origin: https://app.example.com
↓
サーバー
200 OK
Access-Control-Allow-Origin: *
Access-Control-Allow-Origin: *
↓
✓ JSにレスポンスを共有
プリフライトリクエスト
ブラウザ
OPTIONS /api/data
Access-Control-Request-Method: DELETE
Access-Control-Request-Method: DELETE
↓
サーバー
204 No Content
Access-Control-Allow-Methods: DELETE
Access-Control-Allow-Methods: DELETE
↓
ブラウザ
DELETE /api/data
Origin: https://app.example.com
Origin: https://app.example.com
↓
✓ JSにレスポンスを共有
CORSヘッダー
10件中10件を表示
よくあるエラー
8件中8件を表示