CORS（オリジン間リソース共有）

📖 もうちょい詳しく

何が新しいの？

ブラウザにはもともと「同じ出どころ（オリジン）のデータしか自由に読めない」という安全ルールがあります。でも今のサイトは、別の会社が用意したAPI（データの窓口）からも情報を取りたい場面が多いです。そこで「この相手なら別ドメインでもアクセスを許す」と、安全に例外をつくる仕組みがCORSです。

どうやって動いてるの？

ブラウザが別ドメインへデータを取りに行くと、相手のサーバーは応答に「どこからのアクセスを許すか」を書いた合言葉（Access-Control-Allow-Origin というヘッダー）を返します。ブラウザはその合言葉を見て、自分が許可された相手なら結果をページに渡し、許可されていなければ結果を渡さずに止めます。判断するのはサーバーではなくブラウザ側、という点が特徴です。

何ができるの？

信頼できるサービス同士だけ、安全にデータをやり取りできます。たとえば自分のサイトから天気APIや地図APIを呼んで表示する、といったことが許可された範囲でできます。そもそもブラウザは、悪意あるサイトのスクリプトが許可なく別ドメインのデータを読み取ること（横取り）を、最初から止めています。CORSはその上で「この相手なら読んでよい」と必要な例外だけを許す仕組み、と考えると分かりやすいです。

🌱 身近なたとえ

会員制の図書館で例えると分かりやすいです。受付（サーバー）には「うちは隣町のA学校の生徒なら入れます」という入館リストがあります。来た人（ブラウザ）が別の町から来ても、リストに名前がなければ本（データ）は渡されません。リストに載っている相手だけ、本を持ち帰れる、というイメージです。

✅ まず覚えるポイント

• CORSは「別ドメインへのアクセスを許すか」を決めるブラウザの安全ルールです。
• 許可するかどうかは、相手サーバーが返す「合言葉」を見てブラウザが判断します。
• 同じ出どころなら最初から自由、別の出どころのときだけCORSが関わります。
• 許可されていないと、データは取れていてもページに渡されず止まります。
• 不正なサイトによるデータの横取りを防ぐのが目的です。

🧭 よくある勘違い

CORSエラーが出たら、攻撃を受けているの？

そうとは限りません。多くは設定不足です。呼び出し先のサーバーが「あなたのサイトを許可する」合言葉を返していないだけ、ということがほとんどです。サーバー側の許可設定を直すと直る場合が多いです。

CORSがあれば、それだけで安全なの？

CORSはあくまでブラウザ上での横取りを防ぐ仕組みの一つです。サーバー自身がログインの確認やアクセス権のチェックをしないと守りきれません。CORSは複数ある防御のうちの一枚、と考えるのが正確です。

🧩 関連して覚えると楽な言葉

• API: サービス同士がデータをやり取りするための窓口のことです。
• HTTP: ブラウザとサーバーが会話するときの共通ルールです。CORSの合言葉もこの中でやり取りされます。
• CSRF: ログイン中のユーザーをだまし、本人が望まない操作をこっそり実行させる攻撃です。別ドメインがからむ点で、CORSと対比して覚えると整理しやすいです。
• Cookie: ログイン状態などをブラウザに覚えさせる小さなデータです。横取りされると危険な代表例です。

🏁 ひとことでまとめ

別ドメインのデータを使うとき、「この相手は信頼してよいか」をブラウザが合言葉で確かめる、その許可の仕組みがCORSです。