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

ポイントは、CORS はサーバのアクセスを増やす緩和策であって、制限を強める仕組みではないこと。そして判定するのはブラウザだということです。だから「JS のコードを直せば直る」ものではありません。

オリジンとは（scheme / host / port）

「オリジン（origin）」は、URL のうち スキーム・ホスト・ポートの3点セットを指します。この3つがすべて一致して初めて「同一オリジン」です。

https://example.com:443/page を基準にすると…

同一オリジンポリシーと、なぜ CORS が要る

ブラウザには 同一オリジンポリシー（Same-Origin Policy） という安全装置があります。あるオリジンの JavaScript が、別オリジンのレスポンスの中身を勝手に読むことを禁じるルールです。

なぜ必要か。もし制限が無ければ、あなたが開いている悪意あるサイトの JS が、裏で https://bank.example.com/balance をあなたのログイン状態（Cookie）込みで叩き、残高を読み取って盗み出せてしまいます。これを防ぐのが同一オリジンポリシーです。

一方で現実には、https://app.example.com のフロントが https://api.example.com の API を呼ぶ、といった正当な別オリジン通信が必要です。そこで「サーバ側が明示的に許可したものだけ通す」仕組みとして CORS が用意されています。

単純リクエストとプリフライト

CORS には大きく2パターンあります。リクエストが「単純（simple）」かどうかで分岐します。

単純リクエストの主な条件（ざっくり）:

• メソッドが GET / POST / HEAD のいずれか
• 独自ヘッダを付けない（Authorization など追加のものは原則NG）
• Content-Type が application/x-www-form-urlencoded / multipart/form-data / text/plain のいずれか

これらを1つでも外れると「単純でない」とみなされ、本番リクエストの前に プリフライト（preflight） が走ります。プリフライトは OPTIONS メソッドで「これから本番を送りたい。許可する？」とサーバに事前確認する仕組みです。

Access-Control-Allow-* ヘッダ

許可を出すのはサーバのレスポンスヘッダです。代表的なものを押さえれば全体像がつかめます。

プリフライトでは、ブラウザが Access-Control-Request-Method / Access-Control-Request-Headers で「こういう本番を送りたい」と申告し、サーバが上記の Allow-* で「OK / NG」を返す、という対話になっています。

典型的なエラーと対処

ブラウザのコンソールに出る代表的なメッセージと、原因の切り分けです。

例：許可するサーバと、呼ぶ側

サーバが返すべきレスポンスヘッダ（イメージ）。

HTTP/1.1 200 OK
Access-Control-Allow-Origin: https://app.example.com
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 600
Content-Type: application/json

プリフライトが走るときの、ブラウザ → サーバの OPTIONS（イメージ）。

OPTIONS /items HTTP/1.1
Origin: https://app.example.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: Content-Type, Authorization

呼ぶ側の JavaScript。Cookie を送るなら credentials の指定を忘れずに。

// JSON の PUT → 自動でプリフライト(OPTIONS)が先に飛ぶ
const res = await fetch("https://api.example.com/items/1", {
  method: "PUT",
  headers: { "Content-Type": "application/json" },
  credentials: "include", // Cookie 等を送る場合
  body: JSON.stringify({ name: "demo" }),
});
const data = await res.json();

CORS はあくまでブラウザの世界の話です。土台となる HTTP の仕組みは HTTP / HTTPS を、ブラウザから API を叩く側の作法は REST API もあわせてどうぞ。