curl で CORS の設定を確認する

ajax

javascript

慣れないとちょっと難しいウェブサーバの CORS ヘッダの設定。

原理と設定方法については「オリジン間リソース共有 (CORS) - HTTP | MDN」を一通り読めば大丈夫ですが、XMLHttpRequest などを使って実際のリクエストをしてみると上手く動かないということが多々あります。そんなときには curl でプリフライトリクエストを模したリクエストを送ってみると原因を確かめやすいです。

オリジンの https://example.com から https://example.jp/hoge にリクエストを送信する場合、curl のコマンドでは以下のように表すことができます。

curl -H "Origin: https://example.com" -H "Access-Control-Request-Method: GET" -H "Access-Control-Request-Headers: Content-Type, Authorization, X-Requested-With" -X OPTIONS  -v "https://example.jp/hoge"

上記のコマンドを実行すると以下のような結果を得ることができます^*1。

> OPTIONS /hoge HTTP/1.1
> Host: example.jp
> User-Agent: curl/7.55.1
> Accept: */*
> Origin: https://example.com
> Access-Control-Request-Method: GET
> Access-Control-Request-Headers: Content-Type, Authorization, X-Requested-With

< HTTP/1.1 200 OK
< Date: Fri, 26 Nov 2021 3:36:09 GMT
< Server: Apache/2.4
< Access-Control-Allow-Origin: https://example.com
< Access-Control-Allow-Methods: GET
< Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With
< Access-Control-Max-Age: 5
< Access-Control-Allow-Credentials: true
< Content-Length: 0
< Content-Type: text/html

上記でリクエスト>とレスポンス<で、同じ内容が帰ってきていれば問題ありません、
例えば Origin: と Access-Control-Allow-Origin:、Access-Control-Request-Method: と Access-Control-Allow-Methods:、Access-Control-Request-Headers: と Access-Control-Allow-Headers: の部分の対応をチェックすることになります。