はじめに
MDNを読んだ感じ、PUTメソッドや独自ヘッダーを使うとプリフライトリクエストが発生するらしい。
いまいちイメージが掴めなかったので、サーバー側とクライアント側両方の動作を確認してみた。
リポジトリ
作りました
プリフライトリクエスト(Preflight request)とは
CORSの仕組みの一部として、ブラウザが本リクエストの前に自動的に送信するOPTIONSリクエスト。
以下の条件で発生する:
- GET、HEAD、POST以外のHTTPメソッド(PUT、DELETEなど)
- 特定のヘッダーの使用(Content-Type: application/json、カスタムヘッダーなど)
実装のポイント
サーバー側(PHP)
Access-Control-Allow-Origin
Access-Control-Allow-Methods
Access-Control-Allow-Headers
ヘッダーを適切に設定する必要がある。
クライアント側(JavaScript)
Fetch APIやXMLHttpRequestで独自ヘッダーやPUT/DELETEメソッドを使うと、自動的にプリフライトが発生する。
デベロッパーツールでの確認
ブラウザのネットワークタブで、OPTIONSリクエストが本リクエストの前に送信されていることが確認できる。