できない.dev

CORS

別名: Cross-Origin Resource Sharing / クロスオリジン

ブラウザがあるオリジン（http(s) + ホスト + ポート）から別オリジンの API を呼び出すときに、サーバ側が許可ヘッダを返さないと弾く仕組み。Same-Origin Policy の緩和ルール。

#security#http#browser#api

定義

CORS（Cross-Origin Resource Sharing） は、ブラウザがオリジンをまたぐリクエストを送る際に、サーバが Access-Control-Allow-Origin などのレスポンスヘッダで「許可」を明示することで通信を成立させる仕組み。
標準は Fetch Spec の HTTP CORS protocol。

詳細

ブラウザは原則として Same-Origin Policy（同一オリジン制約）により、JS から別オリジンのレスポンスを読ませない。fetch("https://api.example.com/...") を別ドメインのページから叩くと、ブラウザは

  1. 単純リクエスト（GET / HEAD / 一部の POST）はリクエストを送りつつレスポンスを精査
  2. プリフライト（その他のメソッド・カスタムヘッダあり）は OPTIONS リクエストで事前許諾を確認

し、サーバが Access-Control-Allow-Origin: <呼び出し元> を返さなければ JS にレスポンス本体を渡さない。

よくある誤解

  • サーバを叩けば成立: いいえ。ブラウザがレスポンスを JS に渡さないだけで、サーバ自体は処理を実行する場合がある（POST が走ってしまうケースに注意）。
  • CORS = セキュリティ：CORS は防御の最後の砦ではない。
    本質的な認可は CSRF 対策・トークン検証など別レイヤで行う。
  • Access-Control-Allow-Origin: * で全部解決：Cookie 認証（credentials: 'include'）と * は同時に使えない。
    明示的なオリジンを返す必要がある。

関連

サーバ側（Express / Nginx / API Gateway 等）で適切なヘッダを返す必要がある。
クライアント側で JS だけでは突破できない。