はじめに
ウェブ開発をしていると、突然ブラウザのコンソールに「CORS policy」というエラーが表示されて頭を抱えた経験はありませんか？このエラーの正体であるCORS（Cross-Origin Resource Sharing：クロスオリジンリソース共有）について、技術的な知識がなくても理解できるように解説します。
CORSとは何か？
CORSは「異なるウェブサイト間でのデータやりとりを制御する仕組み」です。これは主にセキュリティのために存在しています。
オリジンとは？
「オリジン」は、ウェブサイトの「住所」のようなものです。オリジンは以下の3つの要素からなります：
-
プロトコル:
http://やhttps://（どのような方法でアクセスするか） -
ドメイン:
example.comやlocalhost（どのサーバーにアクセスするか） -
ポート番号:
:8080や:3000（そのサーバーのどの「ドア」を使うか）
例えば、https://example.com:443 というのは一つのオリジンです。
なぜCORSが必要なのか？
インターネットには多くの悪意あるウェブサイトが存在します。あなたがオンラインバンキングのサイトにログインしているとき、別の悪意あるサイトがあなたのブラウザを通じてバンキングサイトにリクエストを送り、情報を盗もうとするかもしれません。
このような脅威から守るため、ブラウザには「同一オリジンポリシー」というルールがあります。このルールは「あるウェブページは、そのページと同じオリジンのリソースにしかアクセスできない」というものです。
しかし、現代のウェブサービスでは異なるオリジン間での通信が必要なケースが多いです。例えば：
- フロントエンドとバックエンドを別々のサーバーでホスティングする場合
- 外部APIを使用する場合
そこで登場するのがCORS（クロスオリジンリソース共有）です。これは「特定の条件を満たせば、異なるオリジン間での通信を許可する」という仕組みです。
CORSの仕組みをわかりやすく例えると
セキュリティゲートの例え
CORSは、高セキュリティビルのエントランスにあるセキュリティゲートのようなものです：
- あなた（ブラウザ）が別のビル（別のオリジン）にある会社（API）を訪問しようとします
- セキュリティゲート（ブラウザのCORS機能）があなたに「どこから来たんですか？」と尋ねます
- あなたは正直に「〇〇ビル（現在のオリジン）から来ました」と答えます
- セキュリティゲートは会社に「〇〇ビルからの訪問者がいますが、入れてもいいですか？」と確認します
- 会社が「はい、そのビルからの訪問者はOKです」と応答すれば入れます（Access-Control-Allow-Origin）
- 会社が「いいえ、そのビルからの訪問者は認めていません」と応答すれば入れません（CORSエラー）
実際の例：ローカル開発環境での例
例えば：
- あなたのウェブアプリは
localhost:8080でホスティングされています - アプリ内のページ
localhost:8080/1にアクセスする場合：- 同じオリジン
localhost:8080からアクセスすると → 問題なく閲覧可能 - 別のオリジン
sample.comからアクセスすると → CORSポリシーによりブロックされる
- 同じオリジン
CORSを設定する方法
CORSを設定するのは主にサーバー側（API側）の仕事です。サーバーは「どのオリジンからのアクセスを許可するか」をHTTPレスポンスヘッダーに含めます。
基本的なCORS設定例（Node.js/Express）
app.use((req, res, next) => {
// 特定のオリジンからのアクセスのみ許可
res.header('Access-Control-Allow-Origin', 'https://localhost:3000');
// 許可するHTTPメソッド
res.header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
// 許可するヘッダー
res.header('Access-Control-Allow-Headers', 'Content-Type, Authorization');
next();
});
CORSエラーの主な原因と解決方法
1. Access-Control-Allow-Origin が設定されていない
症状: No 'Access-Control-Allow-Origin' header is present on the requested resource
解決策: サーバー側でアクセスを許可するオリジンを設定します。
2. 許可されていないオリジンからのアクセス
症状: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin
解決策: サーバー側の許可リストにアクセス元のオリジンを追加します。
3. プリフライトリクエストの問題
症状: Method XXX is not allowed by Access-Control-Allow-Methods
解決策: サーバー側で許可するHTTPメソッドを追加します。
まとめ
CORSは「異なるウェブサイト間でのデータのやり取りを制御する仕組み」です。セキュリティのためにブラウザに組み込まれていますが、適切に設定することで必要な通信を安全に行うことができます。
ウェブ開発者として、CORSを理解しておくことは非常に重要です。API開発時には適切にCORS設定を行い、意図したクライアントだけがAPIにアクセスできるようにしましょう。
CORSエラーが出たら、「どのオリジンからのアクセスを許可すべきか」を考え、適切に設定することが解決の鍵となります。