XMLHttpRequestはコンソール上で動作しますが、スクリプトタグでjsファイルとして使用するとCORSエラーが表示されます

Question

JavaScriptを使用しています。

は、ここで私はES6でコードを書かれているが、私は変換-es2015-モジュールは、UMD使用min.jsを持っている私のコード

const BASE_URL = "https://example.com/api"; 
export class BankApi { 

    constructor(XMLHttpRequest){ 
     this.xhr = XMLHttpRequest; 
    } 

    getBankList(callback){ 
     this.xhr.open("GET", BASE_URL+"/listbanks", true); 
     this.xhr.setRequestHeader('Content-Type', 'application/json'); 
     this.xhr.send(null); 
     this.xhr.onreadystatechange = function(){ 
      if (this.readyState != 4) return; 

      if (this.status == 200) { 
       var data = JSON.parse(this.responseText); 
       callback(data); 
      } 
     }; 
    } 
} 

です。 私は

var bankApi = new BankApi(new XMLHttpRequest()); 
bankApi.getBankList(function(data){ 
    console.log(data); 
}) 

呼び出すと、私はクロームフォームhttps://engineeringqna.comドメインなしのデバッガコンソールから同じことを行うとき、私はエラーに

XMLHttpRequest cannot load https://example.com/api/listbanks. 
Response to preflight request doesn't pass access control check: 
No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'https://engineeringqna.com' is therefore not allowed access. 

を取得しますが、クライアントのプロジェクトに

を、このファイルが含まれていますエラー。

var xhr = new XMLHttpRequest(); 
xhr.open("GET","https://example.com/api/listbanks",true); 
xhr.setRequestHeader('Content-Type', 'application/json'); 
xhr.onreadystatechange = function(){ 
if (xhr.readyState == 4) 
    { 
     if (xhr.status == 200) { 
      console.log(data); 
     } 
     else { 
     alert("xhr Errors Occured"); 
     } 
    } 
} 
xhr.send(null); 

エラーはありません。私はコンソールでデータを取得します。 誰でもここで何が起こっているのか説明してもらえますか？

ありがとうございます。あなたはこれを「プリフライト」CORSトリガーcontent-typeapplication/jsonに設定されたよう

Answer 1

- OPTIONS要求、この場合、サーバ

で処理する必要があり、サーバが明確で、その結果、OPTIONSリクエストを処理しません。レスポンスにアクセス制御許可元がありません。リクエストを強制終了します。

特に、GETリクエストでは、このヘッダーを設定する必要はありません（コンテンツを送信しないので、コンテンツタイプを指定するのはなぜですか？ ）

行を削除することによって

this.xhr.setRequestHeader('Content-Type', 'application/json'); 

ブラウザが期待通りしたがって、APIが応答に応じて、

を振る舞う必要があり、あなたが応答MIMEタイプをオーバーライドするoverrideMimeType()方法を望んでいたかもしれない、プリフライトリクエストを送信しません - しかし、要求作品以来、コンソールではおそらくどちらも必要ありません