CORSは、ブラウザが別ドメインのAPIへアクセスするとき、サーバー側が「その相手に見せてよいか」を伝える仕組み。
エラーに見えることも多いですが、勝手な読み取りを防ぐためのブラウザの安全確認です。
CORSの基本
CORSは「Cross-Origin Resource Sharing」の略です。別のオリジンにあるデータを、ブラウザから読んでよいかを決める仕組みです。
オリジンは、ざっくり言うと「どの場所から来たページか」です。ドメイン、通信方式、ポートが違うと、ブラウザは別の場所として扱います。
同じサイト内の画像やAPIは、普段どおり読み込めます。
別のサイトにあるAPIへアクセスすると、許可設定が必要になります。
許可がなければ、JavaScriptから結果を読めないようにします。
なぜ必要なのか
ログイン中のサービスや社内向けのAPIなど、ブラウザから勝手に読めると困る情報があります。CORSは、別サイトのJavaScriptが勝手にデータを読むのを防ぐための入口になります。
大切なのは、CORSは「リクエストを完全に送らせない仕組み」ではなく、「ブラウザのJavaScriptがレスポンスを読めるか」を制御する仕組みだという点です。
よく見るエラーの意味
開発中にCORSエラーが出ると、APIが壊れているように見えることがあります。ただし実際には、APIが返したレスポンスをブラウザが「このページには読ませない」と判断しているだけの場合があります。
対策は、APIサーバー側で許可するオリジンを正しく設定することです。何でも許可する設定は便利に見えますが、ログイン情報を扱うAPIでは特に慎重に決めます。
本番サイトのドメインなど、必要な相手だけを許可します。
CORSで許可しても、ログイン確認や権限確認は別に必要です。
localhost から呼ぶ場合も、必要なら開発用の許可を用意します。
ここまでのまとめ
CORSは、別ドメインのAPIをブラウザから読むときの安全確認です。APIサーバーが「この呼び出し元には見せてよい」と返したときだけ、ブラウザはJavaScriptへ結果を渡します。
CORSは、別ドメインのデータをブラウザが読んでよいかを決める許可リストです。