🚀 はじめに

この記事でわかること

  • クロスオリジン（CORS）とは 何者なのか
  • なぜブラウザが「ブロックしました」と言ってくるのか
  • よくあるエラー文の意味と、怖くない正体

✅ 概要解説

クロスオリジン（CORS）とは何か

CORS（Cross-Origin Resource Sharing） とは、

「このWebサイトは、よその住所（オリジン）と通信していいですか？」
を、ブラウザがチェックするルール

のことです。

まず「オリジン」って何？

オリジンとは、次の 3点セット のことです。

  • 通信方法（https など）
  • ドメイン名（example.com）
  • ポート番号（:443 など）

この3つが 全部同じなら「同じオリジン」、
どれか1つでも違えば「別のオリジン（クロスオリジン）」です。

例：

  • https://example.com
  • https://api.example.com ← ❌ ドメインが違う
  • http://example.com ← ❌ http / https が違う

何のためにあるのか

CORSの目的は たった1つ。

✅ 悪いサイトが、あなたの情報を勝手に盗まないようにする

たとえ話：家のポスト

あなたの家（ブラウザ）に、

  • 親（同じオリジン）
  • 知らない人（別オリジン）

が来たとします。

✅ 親なら普通に話す
❌ 知らない人なら「誰？」と確認する

CORSは、この 「確認作業」 を自動でやっています。

CORSがないとどうなるのか

もしCORSがなかったら…

  • 悪意あるサイトが
    • 銀行サイトの情報
    • SNSのログイン状態
    • 個人データ
      を 勝手に読み取れる
  • 「別のタブで開いた怪しいサイトから、情報が盗まれる」

👉 インターネットが無法地帯になります。

🔐 CORSは「使いにくくするため」ではなく
私たちを守るためのルールです。

どんな場面で出てくる？

初心者がよく遭遇するシーン：

  • フロントエンド（HTML/JS）からAPIを呼ぶ
  • 開発中に localhost:3000 → 本番APIへ接続
  • Cloudflare Pages / Vercel / GitHub Pages から通信
  • コンソールにこんな赤文字
Access to fetch at 'https://api.example.com'
from origin 'https://example.com' has been blocked by CORS policy

😱 見た目は怖いですが、
意味は「許可されていない相手なので止めました」だけです。

💡 小話・豆知識・逸話

💡 1) CORSが怒っている相手は「あなた」じゃない

CORSエラーは サーバーが怒っているわけではありません。

👉 怒っているのはブラウザ

  • Chrome / Edge / Firefox が
    「この通信、危ないかも」と止めている

同じAPIでも、

  • サーバー同士の通信 → 通る
  • ブラウザ経由 → 止まる

ということがよくあります。

💡 2) curl や Postman では通るのに？

「ブラウザではエラーなのに、Postmanでは成功する…」

これは CORSはブラウザ限定ルール だから。

📝 CORS = Webブラウザ専用のセキュリティ

💡 3) 名前の由来はとても真面目

CORSは
Cross-Origin Resource Sharing
＝「異なる住所同士で、ちゃんと許可して共有しよう」

という、とても平和的な名前です。

💡 4) 実は「全部禁止」じゃない

サーバー側が、

  • 「このサイトからはOK」
  • 「GETだけOK」
  • 「このヘッダーだけOK」

と細かく許可できます。

これを決めるのが HTTPヘッダー です。

📚 参考リンク

公式・信頼できる情報

🛠️ 関連テーマ・次に理解すると良いこと

🎯 まとめ

  • ✅ CORSは 危険な通信を止めるためのルール
  • ✅ 「別の住所との通信」は 自動でチェックされる
  • ✅ エラーは「失敗」ではなく 正常に守られている証拠
  • ✅ 怖い赤文字＝セキュリティが働いた結果
  • ✅ 初心者がつまずくのは 当たり前