CORS

CORS とは

CORS (Cross-Origin Resource Sharing) は、ブラウザの同一オリジンポリシーを緩和し、異なるオリジン間のリソース共有を許可する仕組みである。フロントエンドと API が異なるドメインにある場合に必要。関連記事: 「CORS ヘッダー」「CORS オリジン」「CORS プリフライト」。

同一オリジンポリシー

同一オリジンポリシーを図で示す。

オリジン = スキーム + ホスト + ポート

https://app.example.com → https://api.example.com
  ホストが異なる → クロスオリジン → CORS が必要

https://example.com → https://example.com/api
  同一オリジン → CORS 不要

CORS の流れ

ブラウザは異なるオリジンへのリクエスト時に Origin ヘッダーを自動付与する。サーバーがレスポンスの Access-Control-Allow-Origin で該当オリジンを許可していれば、ブラウザはレスポンスを JavaScript に渡す。許可されていなければ、サーバーは正常に応答していてもブラウザ側でブロックされる。

1. ブラウザが fetch('https://api.example.com/data') を実行
2. ブラウザが Origin: https://app.example.com ヘッダーを付与
3. サーバーが Access-Control-Allow-Origin: https://app.example.com を返す
4. ブラウザがレスポンスを JavaScript に渡す

Origin が許可リストにない場合:
  → ブラウザがレスポンスをブロック (サーバーは正常に応答している)

CORS を回避する方法

CORS を回避する方法の例を示す。

# CloudFront でパスベースルーティング → 同一オリジン
Distribution:
  Properties:
    DistributionConfig:
      CacheBehaviors:
        - PathPattern: /api/*
          TargetOriginId: api
      DefaultCacheBehavior:
        TargetOriginId: s3
# https://example.com と https://example.com/api は同一オリジン

よくあるエラーと対策

よくあるエラーと対策を以下にまとめる。

エラー	原因	対策
No 'Access-Control-Allow-Origin'	サーバーが CORS ヘッダーを返していない	API Gateway の CORS 設定
Preflight で 401	OPTIONS に認証が必要	OPTIONS は認証不要にする
* + Credentials	ワイルドカードと Cookie の併用	具体的なオリジンを指定

CORS 関連の用語集

CORS 関連の用語集を以下にまとめる。

用語	説明
CORS ヘッダー	レスポンスヘッダーの詳細
CORS オリジン	オリジンの定義と判定
CORS プリフライト	OPTIONS リクエストの仕組み
CORS と HSTS	HTTPS 強制との関係
CORS と SameSite	Cookie の送信制御
CORS とトークン	Bearer トークンの送信

基礎から学ぶなら関連書籍が手がかりになる。