AR ホームベーカリー

オイラのアウトプット用ホームベーカリー！

CORS 一族が設定されているかリクエストベースで確認 (観測) したい

Network memo

よくわすれる。 cURL を使えばよいとのことだった。

zenn.dev

どうする

以下のようにする。

❯ curl --dump-header - '問い合わせ先 URL' -H 'Origin: 問い合わせ元 URL'

いまいちわかりにくいけど、 frontend.example.com から api.example.com へリクエストを送って以下のようなエラーが出たとき。

Access to XMLHttpRequest at 'https://api.example.com/api/v1/test' from origin 'https://frontend.example.com' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

は、このようにする。

❯ curl --dump-header - 'https://api.example.com/api/v1/test' -H 'Origin: https://frontend.example.com'

すると以下のような出力が得られる。

...

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, PUT, PATCH, DELETE, OPTIONS
Access-Control-Expose-Headers:
Access-Control-Max-Age: 7200

...

逆にこれらの結果が得られないなら CORS 一族の設定が足りてないので、利用しているウェブサーバーなりアプリケーションサーバーのコンフィグとにらめっこしましょう。

雑に

設定しているけど Access-Control- 系が 4 種、見えていればだいたい問題ない。 Origin * で許可するなとか、 Method は GET, POST で十分だろ用途に応じてエンドポイント分離して GET, POST も分離しろ、とかご意見は多々あるだろうけど、とりあえずそのあたりは「動くこと」を確認するのが先なので、まずは動く環境を目指しましょうということで一つ。