「ちょっと待った!」の正体。HTTP OPTIONSメソッドとCORSの秘密を紐解く
Web開発をしていると、ブラウザのデベロッパーツール(ネットワークタブ)を眺めていて、ふと気づくことはありませんか?
「あれ、自分が書いたコードには一度しかリクエストを送る処理を書いていないのに、なぜか『OPTIONS』っていう謎の通信が先頭に割り込んでいるぞ?」
そう、これこそが現代Webの「礼儀」とも言えるCORS(Cross-Origin Resource Sharing)プリフライトリクエストです。今日は、この少しだけ気の早い「OPTIONS」メソッドの正体と、なぜそれが必要なのかを、日常の風景に例えながら紐解いていきましょう。
—
1. OPTIONSメソッドって何者?:サーバーへの「事前確認」
まず、HTTPの基本として、私たちは普段「GET(データをもらう)」や「POST(データを送る)」を使いますよね。では、「OPTIONS」は何をするものなのでしょうか。
例えるなら、OPTIONSは「お店の入り口で店員さんに聞く挨拶」のようなものです。
- あなた:「すみません、このお店って何が注文できますか? カードは使えますか?」
- 店員さん(サーバー):「うちはランチ営業のみで、現金のみですよ。」
これがOPTIONSの正体です。Webの世界では、ブラウザがサーバーに対して「ねえ、あなたってどんな操作を受け付けてくれるの?」と、本格的なやり取りを始める前に確認を入れるためのメソッドなんです。
—
2. なぜ「プリフライト」が必要なの?(CORSの文脈)
さて、ここからが本題です。「なぜわざわざ事前確認が必要なのか」。
Webブラウザには「同一生成元ポリシー(Same-Origin Policy)」という、非常に厳格なセキュリティのルールがあります。これは、「悪意のあるサイトが、ユーザーの知らないところで勝手に別のサイトへ通信してデータを盗む」ことを防ぐための防壁です。
しかし、現代のWebアプリケーションはAPIサーバーとフロントエンドが別々の場所(ドメイン)にあることが当たり前ですよね。そこで登場するのがCORSです。
プリフライトリクエストの仕組み
もし、あなたのブラウザが「危険な操作(例えば、データの削除や書き換え)」をしようとしたとき、ブラウザは「いきなり実行して問題ない相手かな?」と不安になります。そこで、本番の通信を行う前に、こんな「前哨戦(プリフライト)」を行います。
1. ブラウザ:(OPTIONSリクエスト送信)「すみません、このサイトから『削除』の操作を投げてもいいですか?」
2. サーバー:「いいですよ。許可します(ヘッダーで応答)」
3. ブラウザ:「了解! じゃあ本番のDELETEリクエストを送りますね!」
こうすることで、万が一、許可されていない危険なサイトが通信を仕掛けてきても、サーバー側で「そんな許可は出していない」と拒否することができるわけです。
—
3. 実践:サーバー側で何を返せばいいの?
もしあなたがWebサーバーの構築を担当していて、このCORS対応をする必要がある場合、サーバーは以下のような「許可証」を返してあげる必要があります。
以下は、Node.js(Express)での典型的な設定例です。
// CORSを許可するための設定例
app.options(‘/api/data’, (req, res) => {
// どのドメインからのアクセスを許可するか
res.header(‘Access-Control-Allow-Origin’, ‘https://your-frontend-site.com’);
// どんなメソッドを許可するか(GET, POST, DELETEなど)
res.header(‘Access-Control-Allow-Methods’, ‘GET, POST, DELETE’);
// どんなヘッダー情報を含めていいか
res.header(‘Access-Control-Allow-Headers’, ‘Content-Type, Authorization’);
// これで「許可OK!」と伝えて通信を終了する
res.sendStatus(200);
});
このコードが書かれていることで、ブラウザは「ああ、このサーバーは親切だな。安全に通信できるぞ」と判断し、無事に本番の通信へと進むことができるのです。
—
まとめ:ネットワークの礼儀を理解しよう
OPTIONSメソッドやプリフライトリクエストは、一見すると「通信の回数が増えて遅くなるだけじゃないか」と感じるかもしれません。しかし、これらは「セキュリティ」という見えない壁を、Webという巨大なプラットフォーム上で守り続けるための大事な儀式です。
- OPTIONSメソッドは、サーバーの「対応可能能力」を聞くためのもの。
- プリフライトは、クロスドメイン通信を安全に行うための「前哨戦」。
もし次にブラウザのネットワークタブでOPTIONSを見かけたら、「お、ブラウザがサーバーにちゃんと許可を確認してくれているんだな」と、その健気な仕事ぶりに目を細めてあげてくださいね。
ネットワークは、こうした小さな「確認の積み重ね」によって成り立っています。一歩ずつ、パケットの旅を理解していきましょう!
コメント