フロントエンジニアでもCORSエラーに関して最低限覚えておきたいこと

CORSエラーに関して最低限覚えておきたいこと

corsエラーは開発時によく発生しますが、恥ずかしながら「異なるオリジン間のapiリクエストで発生する」くらいにしか理解していませんでした。

フロントエンジニアだからといって曖昧な理解しかできていないのはまずいので、何が起きているかは理解しておかなくてはと思ったので忘却録として残します。

corsエラーが発生する時の状況

異なるオリジン間でリクエストを行うと、基本的にcorsエラーが発生します。

例）localhost:3333→localhost:3000のGETリクエスト

CORSエラーが発生しても、検証ツールのネットワークタブには、status:200 OKと表示されるっぽいので紛らわしいですね。

CORS対応の処理がない場合のレスポンスヘッダーは以下です。

corsエラー対応された時の状況

api側でcorsの対応を行った後のレスポンスヘッダーは以下です。

Access-Control-Allow-~~~のヘッダーが追加されています。
要は、これらがレスポンスヘッダーにないとCORSエラーが発生するということですね。

GETのapiは、Acces-Control-Allow-Originだけでcorsエラーが解消したのですが、POSTやPUTはAcces-Control-Allow-MethodやAcces-Control-Allow-Headersの設定も必要でした。
（POSTやPUTはリクエストヘッダーにContent-Type:application/jsonなどの情報を追加する要素があるかららしいです）

corsエラー時のaxiosエラーオブジェクト

corsエラーが発生した時のaxiosのエラーオブジェクトは以下です。

レスポンスが正常に受け取れない為、error.responseは入っていなく、error.request.statusが0になっています。
cors以外のエラーレスポンスの時は、error.request.statusにも正しいステータスコードが入ります。