用語解説

CORSとは?別ドメインのデータを読み込む際のルール

別のサイトのデータを読み込もうとしたらエラーで止まった、という経験はないでしょうか。その背景にあるのがCORSです。ここでは、別ドメインとのやり取りに設けられた決まりが、なぜ存在し、どう働くのか、そしてブロックにどう向き合えばよいのかをやさしく説明します。

CORSとは何か

CORSとは、あるサイトから別のドメインにあるデータを読み込んでよいかどうかを取り決める仕組みのことです。正式にはオリジン間リソース共有と訳されます。ブラウザが安全のために設ける決まりのひとつです。

ブラウザには、表示しているサイトと同じ出どころのデータしか自由に扱えないという基本ルールがあります。これを前提に、別ドメインのデータを例外的に読み込んでよい場合を定めるのがCORSの役割です。

つまりCORSは禁止のための仕組みではなく、別ドメインとのやり取りを安全に許可するための取り決めだと理解するとよいでしょう。

なぜブロックされるのか

別ドメインへのデータ要求が止められるのは、データを提供する側が「このサイトからの読み込みを許可します」という意思表示をしていないためです。許可の意思表示が無ければ、ブラウザは安全のために結果を渡しません。

この仕組みが無いと、悪意あるサイトが利用者になりすまして他サービスのデータを勝手に読み出せてしまいます。CORSは、そうしたなりすましによる情報の盗み出しを防ぐ防波堤になっています。

ブロックはあくまでブラウザ上での判断です。許可は提供側が出すものなので、読み込む側のページだけを直しても解決しないことが多い、という点が混乱を生みやすいところです。

実務ではどこで関係する?

CORSは言葉の意味だけ覚えても、HTML共有の判断にはつながりません。実務では「表示に関係する話か」「検索に関係する話か」「アクセス制限に関係する話か」を分けて考えると整理しやすくなります。

CORSについて迷ったら、相手が安全に開けるか、検索に出してよいか、ブラウザや環境差で壊れないかを順番に確認します。用語理解は、その判断を早くするための道具として使います。手順が決まったら、HTML/ZIPをアップロードして共有URLを発行し、相手に確認してほしい観点と期限を添えて送ります。

  • 表示の話: HTML/CSS/JS、パス、ブラウザ互換性を確認する
  • 検索の話: noindex、canonical、sitemap、robots.txtの役割を分ける
  • 制限の話: URL共有、パスワード、メール認証、会社ドメイン認証を混同しない
  • 運用の話: 期限、差し替え、削除、共有メッセージまで決める

許可はどう伝わるのか

データを提供するサーバーは、応答に添える付帯情報の中で「どのサイトからの読み込みを許可するか」を示します。ブラウザはこの情報を確認し、自分が許可されていれば結果を受け取り、そうでなければブロックします。

場合によっては、本番の要求の前に「こういう要求をしてもよいか」と事前に確認するやり取りが入ることもあります。これは、影響の大きい操作を勝手に実行させないための安全策です。

いずれにせよ、許可を出すかどうかの主導権は提供側にあります。利用する側は、相手が許可している範囲でのみデータを読み込めるということになります。

ブロックに遭ったときの確認手順

外部のデータが読み込めずエラーになったとき、原因を切り分けるための確認手順があります。読み込む側と提供側のどちらに対処が必要かを見極めるのに役立ちます。

  1. 開発者ツールのコンソールでCORS関連のエラーメッセージを確認する
  2. 読み込もうとしている先が自分の管理下か、外部サービスかを把握する
  3. 提供側が許可の設定を出しているかドキュメントなどで確認する
  4. 自分で提供側も管理しているなら許可の付帯情報を設定する

外部読み込みと安全のバランス

地図やフォント、外部のデータを取り込んで作るページは便利ですが、CORSの許可が前提になります。許可されていない先からの読み込みは、安全のために止められると理解しておく必要があります。

安全のための仕組みは、時に作業の手間にもなりますが、なりすましから利用者を守る大切な役目を担っています。エラーに出会ったら、ルールを破るのではなく許可の有無を確認するのが正しい向き合い方です。

作った成果物を関係者に見てもらうだけなら、外部からの複雑な読み込みに頼らず、ファイル一式をまとめて共有する方が簡単です。ギガサイト便はCSSやJS、画像を含むZIPをそのままドロップして一時URLで共有できるため、確認やレビューの用途では構成を崩さず手早く見せられます。

よくある質問

CORSのエラーは読み込む側で直せますか

多くの場合は直せません。許可を出すのはデータを提供する側だからです。提供側が自分の管理下なら許可の設定を加えられますが、外部サービスの場合は相手が許可していなければ読み込めません。

なぜわざわざブロックする必要があるのですか

許可なく別ドメインのデータを読めると、悪意あるサイトが利用者になりすまして他サービスの情報を盗み出せてしまうためです。CORSはそうしたなりすましを防ぐ安全の仕組みです。

同じサイト内のデータでもCORSが関係しますか

基本的に関係しません。CORSが働くのは別ドメインのデータを読み込もうとするときです。表示しているサイトと同じ出どころのデータは、この決まりの対象外として扱われます。

事前の確認のやり取りとは何ですか

影響の大きい要求の前に、ブラウザが提供側へ「こういう要求をしてよいか」と尋ねる予備のやり取りです。許可が得られてから本番の要求を送ることで、勝手な操作の実行を防いでいます。

実務ではどこで関係する?はHTML共有で必ず理解しておく必要がありますか?

細かな仕様を暗記する必要はありません。ただし、検索に出るか、閲覧者を制限できるか、表示が崩れないかに関わる用語は、共有前の判断材料として押さえておくと安全です。

関連記事

用語解説

CORSとは?別ドメインへのアクセス制御の仕組みをやさしく解説

別ドメインのAPIを呼んだら通信がブロックされた経験を持つ人向けに、CORSがなぜ存在するかをブラウザのセキュリティ設計から説明。プリフライトの仕組みとサーバー側でヘッダーを設定して許可する方法を基礎から整理します。

4分で読める
用語解説

ドメインとは?URLの住所をやさしく解説

取得・設定の前に知っておきたいドメインの基本を整理。サブドメインや独自ドメインとの違いに戸惑っているWeb初心者が、URLの構造を正しく読み解くための入門知識として読める記事です。

5分で読める
用語解説

URLの構造とは?スキーム・ホスト・パスの意味を解説

スキーム・ホスト・パス・クエリと、URLを構成するパーツが何を意味するのかを分解して解説。開発やSEO設定でURLを操作しなければならない人が、構造を正しく理解するための土台になります。

5分で読める
用語解説

HTTPステータスコードとは?主要な番号の意味

200・301・403・404・500など、よく見かける番号が何を伝えているのかを体系的に整理。エラーの原因調査やサイト改修で「ステータスコードの意味が分からない」と感じたときに役立つ入門解説です。

5分で読める
用語解説

404エラーとは?ページが見つからない原因と仕組み

リンクをクリックしたらページが見つからないと表示された――その原因が404なのか、そもそも何が起きているのかを整理。リンク切れや削除後のURL管理を考えるための基礎知識として読めます。

5分で読める
「用語解説」の記事をもっと見る →