🌏
CORS in axios
今までaxiosを使ったAPI連携するときにCORSエラーに悩まされてきました。
MDNを見直すとちょっと理解が深まったので自戒をこめてまとめます。
↓サーバ側でURL許可してもらったけどエラー出る
Access to XMLHttpRequest at 'APIのURL' from origin 'APIを叩いているURL' has been blocked by CORS policy: Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.
結論としては単純リクエストになるようにRequestヘッダーの Content-Type 設定を確認する。ということ。
MDNの単純リクエストの説明を確認すると
Content-Type ヘッダーでは以下の値のみが許可されています。
application/x-www-form-urlencoded
multipart/form-data
text/plain
とあるので設定してリクエストしてみよう。
...
axios({
// 必要な箇所だけ抜粋
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
})
...
axiosは何もしなければ Content-Type: application/json になってることがあるのでPreflight requestが飛んでたという理解。
ライブラリ使わずにネイティブのXHRやfetchでリクエストしてみて再現性があるかチェックしてみるといけること多々あるので原因探る時には試してみよう。
この辺りを試してみて上手くいかない時はバックエンドに相談。
MDNに感謝🙏
Discussion