👋

【CORS】API叩いたらCORSエラーになったときの対処法

2025/01/14に公開

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
    • 単純リクエストとは
      • 上記のプリフライト・リクエストに該当しないリクエスト

CORSエラーを回避する方法

場合分けして考えてみました
ほかにも方法があれば教えてください

  1. 異なるオリジンに対してHTTPリクエストを行いたい、かつHTTPリクエスト先が自作(自社)のシステムで編集可能な場合
  • サーバー側で追加のHTTPヘッダを使用する
    • Access-Control-Allow-Originヘッダにリクエスト元となるURLを記述
  1. 異なるオリジンに対してHTTPリクエストを行いたい、かつHTTPリクエスト先が外部API
  • フロント(JS,TS)側からではなく、バックエンド側からHTTPリクエストするように書き換える

Discussion