プリフライト要求に対する応答がアクセス制御チェックエラーを受け付けません

Question

私が苦労している正確なエラーは、「プリフライト要求への応答はアクセス制御チェックをパスしません」です。「アクセス制御許可の原点」ヘッダーはありませんオリジン 'null'はアクセスが許可されていません。 "

JavaScriptを使用してJSONデータを取得しようとしています（https://api.kraken.com/0/public/OHLC?pair=ETHEUR）。これを行うためにXMLHttpRequestオブジェクトを作成し、要求のタイプとしてGETを指定しました。これはおそらく簡単なリクエストですが、エラーはプリフライトリクエストが送信されたことを示しています。この行動の理由は何ですか？つまり、このエラーを修正するために、Access Control-Allow-Originの値として '*'を指定した要求ヘッダーを設定しようとしましたが、まだエラーが発生します。私は私と同様の質問に対する回答を見てきましたが、私が扱っている問題の解決方法を理解できていませんでした。これはおそらく、まだJavaScriptにとって非常に新しいことが原因です。

あなたは、クロスオリジン・リクエストを作成しようとしているサーバが Access-Control-Allow-Originレスポンスヘッダを送信しないために、このような場合には

var requestURL = 'https://api.kraken.com/0/public/OHLC?pair=ETHEUR' 

    var request = new XMLHttpRequest(); 
    request.open('GET',requestURL,true); 
    request.responseType = 'json'; 

    request.onload = function(){ 
     var data = request.response; 
     console.log(data); 
    } 


    request.setRequestHeader('Access-Control-Allow-Origin','*'); 

    request.send(); 

Answer 1

、あなたの唯一のオプション：いずれかの方法は、以下の私が書いたコードですブラウザーで実行中のフロントエンドJavaScriptコードからそのサーバーに要求を出すには、CORSプロキシーを使用します。そうしないと、ブラウザはフロントエンドJavaScriptコードが応答にアクセスすることを許可しません。

だから、あなたは、あなたがこのような何かを持っているようにコードを変更した場合、あなたの要求を成功させることができます。https://api.kraken.com/0/public/OHLC?pair=ETHEURに要求を転送し、応答を受信https://cors-anywhere.herokuapp.comてリクエストを送信し

var proxyURL = 'https://cors-anywhere.herokuapp.com'; 
var requestURL = 'https://api.kraken.com/0/public/OHLC?pair=ETHEUR'; 
var request = new XMLHttpRequest(); 
request.open('GET', proxyURL + '/' + requestURL, true); 

を。 https://cors-anywhere.herokuapp.comバックエンドはAccess-Control-Allow-Originヘッダをレスポンスに追加し、要求元のフロントエンドコードに返します。

ブラウザでは、応答ヘッダーがAccess-Control-Allow-Originの応答がブラウザに表示されるため、フロントエンドコードが応答にアクセスできるようになります。あなたはまた、簡単にhttps://github.com/Rob--W/cors-anywhere/

もなおrequest.setRequestHeader('Access-Control-Allow-Origin','*')ニーズを使用して、独自のCORSプロキシを設定することができ

は、あなたが（上記のコメントで述べたように）との要求を行うフロントエンドのコードから削除します。

これは、が厳密にはの応答レスポンスで送信するためのヘッダーであるためです。要求の中でクライアント側からそれを送信することは、失敗する不要なCORS preflight OPTIONS requestを実行するためにブラウザをトリガする以外には何の効果もありません。

XHRまたはJavaScriptライブラリのFetch APIまたはAJAXメソッドを使用してフロントエンドJavaScriptコードからクロスオリジンリクエストを送信したときのブラウザの詳細と、ブラウザがフロントエンドを許可するために受信する必要があるレスポンスヘッダーの詳細応答にアクセスするコードはhttps://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORSを参照してください。

var proxyURL = 'https://cors-anywhere.herokuapp.com'; 
 
var requestURL = 'https://api.kraken.com/0/public/OHLC?pair=ETHEUR'; 
 

 
var request = new XMLHttpRequest(); 
 
request.open('GET', proxyURL + '/' + requestURL, true); 
 
request.responseType = 'json'; 
 

 
request.onload = function() { 
 
    var data = request.response; 
 
    document.querySelector('pre').textContent = JSON.stringify(data, null, 2); 
 
} 
 

 
request.send();

<pre></pre>