CORSとは?Web開発者が必ず一度はハマるエラーの正体

CORSとは何の略か

CORSとは、「Cross-Origin Resource Sharing(クロスオリジン・リソース・シェアリング)」の略で、日本語では「オリジンをまたいだ、リソースの共有」といった意味になります。ブラウザが持つ、安全のための仕組みの1つです。

「オリジン」とは何か

CORSを理解する鍵となるのが「オリジン」という考え方です。オリジンとは、大まかに言うと「どのドメインの、どの通信方式・ポートで動いているか」という組み合わせのことです。例えば https://example.com と https://api.example.com は、見た目が似ていても、ブラウザにとっては別のオリジンとして扱われます。

なぜCORSエラーが起きるのか

ブラウザには、「あるサイト(オリジンA)を開いたまま、別のサイト(オリジンB)のデータへ、利用者に気づかれずに裏側で自由にアクセスする」ことを原則として禁止する、「同一オリジンポリシー」という安全のルールが備わっています。

しかし実際の開発では、正当な理由があって、異なるオリジン間でデータをやり取りしたい場面が数多くあります。そこで、アクセス先のサーバーが「このオリジンからのアクセスなら許可します」と、あらかじめ明示的に許可を出す仕組みが用意されました。これがCORSです。逆に言えば、アクセス先のサーバーがこの許可を出していない場合、ブラウザがアクセスをブロックし、コンソールにCORSエラーが表示されることになります。

「入館証を持たない来訪者」に例えると

CORSの仕組みは、オフィスビルの受付に例えるとイメージしやすくなります。

• 建物(サーバー)は、あらかじめ「この会社の社員証(オリジン)を持つ人だけ入館を許可する」という名簿を用意している
• 訪問者(ブラウザからのアクセス)が来た際、受付はまずこの名簿と照合する
• 名簿に載っていない訪問者は、受付(ブラウザ)の時点で入館を断られる

このように、「誰の代わりに立ち寄ったのか」をサーバー側があらかじめ確認する仕組みが、CORSの正体です。

CORSエラーを解決する基本的な考え方

CORSのエラーメッセージには、多くの場合「どのオリジンからのアクセスが拒否されたか」が表示されます。解決のためには、以下のような対応が必要です。

1. アクセス先のサーバー側の設定で、許可するオリジンの一覧に、アクセス元のオリジンを追加する
2. 開発中であれば、サーバー側の設定ファイルやフレームワークが提供するCORS設定機能を確認する
3. 本番環境では、必要な相手先だけを許可し、無制限にすべてを許可する設定は避ける

覚えておきたいこと

CORSは、異なるオリジン間のデータのやり取りを、安全に制御するためのブラウザの仕組みです。エラーが出た際は「怪しい通信をブロックしてくれている」というブラウザの意図を踏まえた上で、アクセス先のサーバー側の許可設定を見直すことが解決への近道です。

あわせて読みたい:CSRF(クロスサイトリクエストフォージェリ)とは