ブラウザの「用心深い門番」：CORSプリフライトリクエストの仕組みを紐解く
こんにちは！ネットワークの世界にどっぷり浸かっているインフラエンジニアです。
皆さんはWebサイトを開発していて、APIを叩いた瞬間にブラウザのコンソール画面で「CORS error」という真っ赤なエラーに絶望したことはありませんか？「ちゃんとAPIは動いているはずなのに、なぜブラウザが怒っているの？」と、夜も眠れなくなるような経験、一度はありますよね。
今日は、その「CORS」という仕組み、特に初学者が一番ハマりやすい「プリフライトリクエスト（OPTIONSメソッド）」について、郵便配達のストーリーに例えて、その裏側を優しく解説していきます。
—
1. そもそもCORSって何？「用心深い門番」の話
Webの世界では、セキュリティのために「違うドメイン（住所）へのアクセスは原則禁止」という同一生成元ポリシー（Same-Origin Policy）というルールがあります。
これを現実世界で例えるなら、「自分の家の郵便受けに、見知らぬ人からの勝手な手紙を入れさせない」というルールです。
しかし、時には外部のサービス（例えば、地図APIや決済APIなど）と連携したいこともありますよね。そこで登場するのがCORS（Cross-Origin Resource Sharing）です。これは、「あらかじめ許可を得た相手なら、手紙のやり取りを認めるよ」という「事前承認リスト」の仕組みのことなんです。
—
2. プリフライトリクエスト：いきなり本番へ行かない理由
ここからが本題の「プリフライトリクエスト」です。
本来なら、JavaScriptで fetch() を使ってAPIを叩けば、すぐにデータが返ってくるはずですよね。でも、ブラウザは非常に用心深いです。いきなり大きな荷物（例えば、データベースを書き換えるような重要なデータ）を送って、もし相手が「え、何それ？」と困惑したら大変ですよね。
そこでブラウザは、いきなり本番のリクエストを送る前に、「OPTIONSメソッド」という「確認用パケット」を先に投げます。これをプリフライト（事前飛行）リクエストと呼びます。
郵便配達の例え
1. プリフライト（確認）: 「今から『更新用』の荷物を送りますが、受け取れますか？ また、私のような外部の者が送っても大丈夫ですか？」と先に手紙を出す。
2. サーバーの回答: 「OKです。ただし、特定の条件（特定のヘッダーやメソッドなど）に限りますよ」と返事をする。
3. 本番リクエスト: ブラウザが「よし、許可が出た！」と確認して初めて、本来のデータを送る。
この2段階の手順こそが、Webセキュリティを守るための大切なステップなんです。
—
3. サーバー側でやるべきこと：Access-Control-Allow-Origin
では、サーバー側ではどう設定すればいいのでしょうか。答えは簡単で、HTTPレスポンスヘッダーに「このドメインからのアクセスを許可するよ」という印を付けるだけです。
例えば、Webサーバーの設定で以下のようなヘッダーを返すようにします。
# 許可するドメインを指定（* は全許可ですが、本番では推奨されません）
Access-Control-Allow-Origin: https://your-frontend-site.com
# 許可するメソッドを指定
Access-Control-Allow-Methods: GET, POST, OPTIONS
# 許可するヘッダーを指定
Access-Control-Allow-Headers: Content-Type, Authorizationこのように、サーバーが「この相手ならOKだよ！」と明示することで、ブラウザは安心して通信を許可してくれます。
—
4. 現場で役立つチェックリスト
もし皆さんの開発環境でエラーが出たら、まずは以下の3点をチェックしてみてください。
- OPTIONSメソッドへの応答: サーバーが
OPTIONSメソッドのリクエストを受け取ったとき、200番台のOKレスポンスを返しているか？（たまに404や405で拒否されていることがあります） - ヘッダーの付与: レスポンスの中に
Access-Control-Allow-Originが含まれているか？ - 開発者ツールのNetworkタブ: ブラウザの開発者ツールを開いて、リクエストが「赤」になっているか確認してください。そこに表示される「Status Code」や「Response Header」を見ると、何が足りないのかが一目瞭然です。
—
最後に：ネットワークを俯瞰する視点を持つ
CORSエラーは、一見すると「開発の邪魔者」に見えます。しかし、これはブラウザが私たちのWebアプリケーションを、悪意あるスクリプトから守ってくれている「頼もしい門番」の働きなんです。
仕組みさえ分かってしまえば、もう怖くありません。「あ、今ブラウザが事前に確認しているんだな」と、パケットの流れを想像できるようになれば、あなたはもうインフラの入り口に立っています。
一歩ずつ、確実に理解を深めていきましょうね。また次回の記事でお会いしましょう！
コメント