👋
【CORS】API叩いたらCORSエラーになったときの対処法
CORSとは
-
Cross-Origin Resource Sharing
の略 - オリジン間リソース共有
- あるオリジンで動いている Web アプリケーションに対して、別のオリジンのサーバーへのアクセスをオリジン間 HTTP リクエストによって許可できる仕組みのこと
- インターネットブラウザに実装されているセキュリティのためのメカニズム
オリジンとは
-
オリジン
=プロトコル
+ホスト
+ドメイン
+ポート番号
- 下記のURLを例に説明する
-
http:://www.hogehoge.com:80/
- http = プロトコル
- www = ホスト名
- hogehoge.com = ドメイン名
- 80 = ポート番号
-
CORSの制限の対象
- HTTPリクエスト
- 異なるオリジン間でのHTTPリクエストは原則禁止
- iFrameの操作
- Canvasの操作
なぜCORSを制限するのか
XSS(クロスサイトスクリプティング)
やCSRF(クロスサイトリクエストフォージェリ)
などのネットワーク上の攻撃を防ぐため。
どういうときにCORSエラーが起きるか?
- CORSエラーが起きるときは
プリフライト・リクエスト
のときである- あるオリジンのアプリケーションのフロントエンド(JS,TS)から、異なるオリジンに対してFetchなどのHTTPリクエストを行ったとき、などである
プリフライト・リクエストとは
- HTTPリクエストには
単純リクエスト
とプリフライト・リクエスト
がある- プリフライト・リクエストとは
- 下記のいずれかの条件に1つでも該当すればプリフライト・リクエストである
- リクエストに下記のカスタムヘッダーが含まれる
- Accept
- Accept-Language
- Content-Language
- Content-Type
- HTTPメソッドがGET,HEAD,POST以外のとき
- Content-Typeが下記の値以外
- application/x-www-form-urlencoded
- multipart/form-data
- text/plain
- リクエストに下記のカスタムヘッダーが含まれる
- 下記のいずれかの条件に1つでも該当すればプリフライト・リクエストである
- 単純リクエストとは
- 上記のプリフライト・リクエストに該当しないリクエスト
- プリフライト・リクエストとは
CORSエラーを回避する方法
場合分けして考えてみました
ほかにも方法があれば教えてください
- 異なるオリジンに対してHTTPリクエストを行いたい、かつHTTPリクエスト先が自作(自社)のシステムで編集可能な場合
- サーバー側で追加のHTTPヘッダを使用する
- Access-Control-Allow-Originヘッダにリクエスト元となるURLを記述
- 異なるオリジンに対してHTTPリクエストを行いたい、かつHTTPリクエスト先が外部API
- フロント(JS,TS)側からではなく、バックエンド側からHTTPリクエストするように書き換える
Discussion