CORSの仕組み — ブラウザは別のオリジンの応答をどう扱うのか

ひよこ

APIには届いているのに、ブラウザにはCORSエラーが出るのはなぜ？

ペンギン先生

CORSは、別のオリジンから取得した応答を、ページのJavaScriptに読ませてよいかをブラウザが確かめる仕組みだからだよ。リクエストが送られ、サーバーで処理が済んでも、応答を読めずにエラーになる場合があるんだ。「CORSエラーならサーバーには何も届いていない」とは限らないよ。

ひよこ

その「オリジン」は、URLと同じ意味？

ペンギン先生

ウェブではスキーム・ホスト・ポートの組み合わせだよ。https://app.example.comとhttps://api.example.comはホストが違うので別オリジン。同じホストでもhttpとhttpsは別だね。一方、パスが/articleから/profileに変わるだけなら同じオリジンだよ。省略されたポートはhttpsなら通常443として比べるんだ。

ひよこ

どうして応答を自由に読ませないの？

ペンギン先生

悪意のあるページから、別のサービスの非公開情報を読まれないようにするためだよ。同一オリジンポリシーによる制限を、サーバーの許可に応じて緩めるのがCORSなんだ。APIがAccess-Control-Allow-Originで許可するオリジンを返すと、ブラウザが照合する。これはAPIを使う人の本人確認や権限チェックとは別の仕組みだよ。

ひよこ

毎回、送ってから応答を読めるか確かめるの？

ペンギン先生

本番の要求を送る前に、OPTIONSで許可を確認する「プリフライト」が必要な場合もあるよ。たとえばJSONを送るPOSTやAuthorizationヘッダーを付ける要求などだね。ブラウザは使うメソッドやヘッダーを知らせ、サーバーの許可を確かめてから本番の要求を送る。失敗したら本番は送らないし、成功しても本番の応答に対するCORSの確認は必要だよ。

ひよこ

GETなら事前確認は不要、という覚え方でいい？

ペンギン先生

メソッドだけでは決まらないよ。GET・HEAD・POSTでも、付けるヘッダーやContent-Typeなどの条件が関係するんだ。条件を満たせばプリフライトなしで送るけれど、応答の読み取りには許可が必要だよ。事前確認の結果がキャッシュされていて、OPTIONSが省略されることもあるんだ。

ひよこ

ログイン中のCookieも送って、結果を読みたいときは？

ペンギン先生

fetchではcredentialsをincludeにし、サーバーは具体的な許可オリジンとAccess-Control-Allow-Credentials: trueを返す必要があるよ。この場合、Allow-Originの「*」では応答を読めないんだ。さらにCookieのSameSiteなどの属性や、ブラウザの第三者Cookie制限にも従うので、CORSを許可すれば必ずCookieが届くわけではないよ。

ひよこ

エラーを直したくて、全部「*」にしたくなる…

ペンギン先生

まず開発者ツールのNetworkで、OPTIONSが失敗しているのか、本番の応答が読めないのかを分けよう。プリフライトは200だけでなく204などの成功ステータスでもよいけれど、必要な許可ヘッダーがそろっていることが大切。許可するオリジンは用途に合わせ、受け取ったOriginを無条件で反射しないでね。

ひよこ

CORSを正しく設定すれば、不正な操作も防げる？

ペンギン先生

それだけでは不十分だよ。プリフライトなしで送れる要求もあるので、CSRFには別の対策が必要。サーバー同士の通信やcurlには、ブラウザのCORSによる読み取り制限が適用されないんだ。API側の認証・認可は必ず別に設計しよう。CORSは「ブラウザのページにどの応答を読ませるか」と覚えると、担当範囲が分かるね。

エラーを調べる順序

1. ページ側とAPI側のスキーム・ホスト・ポートを比べる。
2. NetworkでOPTIONSと本番リクエストを分け、ステータスと応答ヘッダーを見る。OPTIONSがないことだけで異常とは判断しない。
3. プリフライトでは、許可オリジン・メソッド・要求ヘッダーを照合する。本番の応答にも許可オリジンが必要。
4. Cookie付きの場合は、具体的な許可オリジン、Allow-Credentials、Cookie属性、ブラウザの制限を確認する。
5. 401・403・500などの応答やリダイレクトも確認する。CORS表示の背後に認証失敗やサーバー障害が隠れる場合がある。

mode: "no-cors"は、自由にJSONを読めるようにする設定ではありません。クロスオリジンの応答がopaqueになり、JavaScriptから本文などを読めないためです。ブラウザの保護機能を無効にするのではなく、管理するAPIの許可設定を直します。

次に読む：OAuthの認可の仕組みとブラウザの通信と描画。

参考資料

確認日：2026年9月21日。

• MDN — Cross-Origin Resource Sharing (CORS) — 応答共有、プリフライトの条件、資格情報付きリクエスト、Cookieポリシーの制約。
• WHATWG Fetch Standard — CORS protocol — CORSヘッダーの意味、プリフライトと成功ステータス、実際の応答の検査。