CORS設定をcurlで動作確認する方法とハマったコト

CORSを実装するライブラリにアップデートがあったため、curlコマンドでCORS設定の動作確認を行いました。

CORS設定をcurlで動作確認する方法

開発環境のURLは以下とします。

• リクエスト元（フロント）： http://localhost:1111
• リクエスト先（API）: http://localhost:8888

curlを叩き、

curl --dump-header - 'http://localhost:8888/' -H 'Origin: http://localhost:1111'

結果のレスポンスヘッダーにAccess-Control-Allow-Originがあるかを確認します。

HTTP/1.1 401 Unauthorized
Content-Type: application/json; charset=utf-8
+ Access-Control-Allow-Origin: http://localhost:1111
+ Access-Control-Allow-Methods: {GETやPOSTなど許可したメソッド一覧}

Access-Control-Allow-Originがある場合はCORSが正常に動作します。
※API側で既にCORSの許可設定（OriginやMethodなど）がされている前提です。

CORSエラーになるコマンド

Originのスキームやホスト、ポート番号が違うためエラーになります。

curl --dump-header - 'http://localhost:8888/' -H 'Origin: https://test:123'

結果にAccess-Control-Allow-Originなどが見当たりません。

HTTP/1.1 401 Unauthorized
Content-Type: application/json; charset=utf-8

ハマったコト

大まかに２つです：

1. レスポンスヘッダーではなくレスポンスデータを見ていた
2. オプションに--dump-headerを指定していない

1. レスポンスヘッダーではなくレスポンスデータを見ていた

「CORSエラー = データが返ってこない」という大きな勘違いをしていました。
CORSエラーはブラウザ上で行われる判定であり、curlを叩いているターミナル上ではCORSエラーが存在しないのでAPIからJSON（レスポンスデータ）が普通に返ってきます。
「curlでデータが返ってくるからCORSエラーが発生しない = 動作が正常ではない」と勘違いしてハマりました。
レスポンスデータを見るのではなくレスポンスヘッダーを見るのでした。

2. オプションに--dump-headerを指定していない

1と繋がる話ですが、レスポンスヘッダーを見るために--dump-headerオプションを指定しました。
これを付けることでレスポンスヘッダーが表示され、Access-Control-Allow-Originの有無を確認できます。

もしくは-X OPTIONSを使い以下の形でも確認できます：

curl -H "Origin: http://localhost:1111" \
  -H "Access-Control-Request-Method: POST" \
  -H "Access-Control-Request-Headers: X-Requested-With"  \
  -X OPTIONS \
  -v "http://localhost:8888"

---

ちなみにCORSは「コース（コゥス、コーズ）」と読むらしいです。

参考

https://qiita.com/ryosuketter/items/a60a2bc0220a5cbff17e
https://omohikane.com/test_cors_with_curl/