Network 02 | CORS


CORSとは?


ソース間リソース共有
  • は、追加のHTTPヘッダを使用して、あるソースからのWebアプリケーションに別のソースの選択されたリソースへのアクセスをブラウザで通知する.
  • Webアプリケーションは、リソースがソース(ドメイン、プロトコル、ポート)と異なる場合に、クロスソースのHTTP要求
  • を発行する.

  • 原理を説明すると
    Webクライアントアプリケーションが他のソースからのリソースを要求すると、HTTPプロトコルを使用して要求が送信され、ブラウザは要求ヘッダでOriginというフィールドに要求を送信し、要求をソースに送信します.
    サーバがこの要求に応答すると、応答ヘッダのアクセス制御Allow-Originは「このリソースへのアクセスを許可するソース」を与えます.その後、応答を受信したブラウザは、自身が発行した要求のOriginと、サーバが発行した応答のAccess-Clontrol-Allow-Originとを比較して、応答が有効かどうかを判断する.

  • [注意]Origin
    サイトのURLは以下のようになります.

    この場合、Origin(ソース)=プロトコル+ホストになります.
  • サマリ

  • CORSは、異なるソース間でリソースの伝達を制御するメカニズムであり、
  • .
  • CORSリクエストを実現するには、サーバが特定のヘッダ「アクセス制御」Allow-Originとともに応答する必要があります.
  • CORSポリシーに違反した場合、異なるソースで要求が発行されると、ブラウザはセキュリティ上の理由で停止します.
  • 解決策


    サーバ側ソリューション

  • HTTP応答ヘッダアクセス制御-すべての-origin:*またはアクセス-制御-すべての-origin:許可するドメインを設定します.
  • は通常Defaultに設定されます.
  • クライアントソリューション


    プロキシサーバーの使用

  • エージェントとは?(クリック)
  • 欠点:速度が遅い(中間段階がある)
  • で使用可能なプロキシサーバ:https://cors-anywhere.herokuapp.com2
  • メソッド
  • 中間ブロック要求、HTTP応答ヘッダでアクセス制御を有効にする-すべてのOrigin:*
    要求するURLの前にプロキシサーバURLを付けて
  • を要求する.
        axios({
          method: "GET",
          url: `https://cors-anywhere.herokuapp.com/https://api.dropper.tech/covid19/status/korea?locale=${city}`,
          headers: {
          'APIKey': COVID_APIKEY,
  • コメントとソース
  • https://developer.mozilla.org/ko/docs/Web/HTTP/CORS
  • https://xiubindev.tistory.com/115
  • https://velog.io/@geunwoobaek/CoRS原因-および-解決方法