CORS

CORSは、異なるドメイン間でのデータのやりとりをブラウザが許可するかどうかを制御する仕組みです。

CORS のアイキャッチ図解
まずは、こう考えるとつかみやすいです。

CORSは、マンションの管理規約のようなものです。よその建物の住人が入って来てよいかどうか、管理側が決めておく取り決めです。

ひとことで言うと

CORSは、あるドメインのページが別のドメインへリクエストを送ってよいかどうかを、ブラウザとサーバーが確認し合う仕組みです。

たとえば app.example.com のページが api.other.com へデータを取りに行こうとしたとき、ブラウザは「本当に許可されているか?」をサーバーに確認します。 サーバーが「許可する」と返せばデータを受け取れますが、何も答えなければブラウザがその通信をブロックします。

たとえ話でもう少し詳しく

CORSは、マンションの入館ルールに近いです。

  • 自分の部屋(同じドメイン)には自由に出入りできる
  • 隣の棟(別のドメイン)へ入るには、管理組合の許可が必要
  • 許可証(レスポンスヘッダー)を持っていれば入れる、なければ入口で止められる

ブラウザは同じドメイン内の通信は自由に許しますが、別ドメインへの通信にはこのチェックを挟みます。 これは悪意のあるサイトが勝手に別サービスのAPIを呼び出してデータを抜き取るのを防ぐためのブラウザの安全機能です。 サーバー側で「このドメインからの通信は許可する」と明示することで、正規のアプリだけが通信できるようになります。

よく出る場面・使いどころ

  • フロントエンドとバックエンドを別ドメインで運用しているとき
  • 自社サービスのAPIを特定のパートナーサイトだけに公開したいとき
  • 開発中にローカル環境(localhost)から本番APIを呼び出したいとき
  • ブラウザのコンソールに「CORSエラー」と出て通信が止まったとき

似た言葉との違い

  • 認証
    • 「誰が」アクセスしているかを確認する仕組み
    • CORSは「どのドメインから」の通信を許可するかを制御する仕組み
  • WAF
    • 危険なリクエストをサーバー側でフィルタリングする仕組み
    • CORSはブラウザが行うドメイン間通信の制御で、サーバーへ届く前の段階で働く
  • HTTP
    • ブラウザとサーバーの通信ルール
    • CORSはHTTPのヘッダーを使って許可の有無をやりとりする

実務で気にするポイント

  • 許可するドメインは必要最小限にする(* で全許可にしない)
  • 認証情報(Cookieなど)を含む通信は、追加の設定が必要
  • プリフライトリクエスト(事前確認)が発生する場合、サーバーの応答速度に影響する
  • 開発環境と本番環境で許可するドメインが異なるため、環境変数で切り替える

注意: CORSはブラウザの安全機能です。サーバー同士の通信(バックエンド間のAPI呼び出しなど)には適用されません。「CORSを無効にする」という対応は問題を根本解決せず、セキュリティを下げるだけなので避けましょう。