CORS Access-Control-Allow-Originはレスポンスヘッダーなのだ

 以下の記事はアメブロで2021-11-27に投稿したものです。

よくある対策で

リクエストヘッダーにAccess-Control-Allow-Originを含めるって

あるけど、

これは間違いだ。

公式サイト見るとわかるが、

これはレスポンスヘッダーだ。

CORS

リクエストヘッダに含めても動作していたとしていたら

サーバー側が気をきかせて、設定してるだけ。

CORSで許されるヘッダーは

サーバー側のレスポンスヘッダーにあるAccess-Control-Allow-Headers

にリストアップされる。

なので、余計なヘッダーがあるとCORSエラーは回避できなくなる。

結局のところ、CORS対策でリクエスト側がやることは

許されるヘッダーだけを

許されるメソッドでリクエストしているかだけを気をつけるのだ。

認証系のクッキーがどうとかになるとまた違う対策が必要みたいだが。

ちなみにaxiosではロクなエラー詳細を返してくれないので

例外が起きてerror.responseが空、

間違いなくサーバー側はなにかレスポンスを返してる

であれば

まずCORSエラーを疑うと良い。

またまたちなみにだが、

awsのCloudWatchログではCORSのOPTIONSリクエストは記録されない。

なので、ログには全く記録されずリクエストが届いていないように見える、

curlではリクエストが問題ない

であればCORSを疑おう。