バニラでJSONPのないXMLHttpRequestでCORSを克服するJavaScript

Question

私の質問を読んでいただきありがとうございます！

私はAJAXリクエストの問題を解決しようと数日を費やしました。スタックオーバーフローに関する数十の答えを読んだ後、私は解決策を見つけることができません。助けてください。

XMLHttpRequestメソッドをバニラJavaScriptで使用して、Dark Skyが提供するAPIからJSON形式のデータを受け取ろうとしています。これは私の要求を送信しようとしているURIです（私のキーを公開することは問題ではありません）Link to a sample API request

問題は私がCORSエラーを受け続けることです。以前はJSONPリクエストでこの問題を克服しましたが、今回はJSONPの使用を避ける方法があるかどうかを理解しようとしています。

私はヘッダーを使用しようとしましたが、コンソールでCORSエラーが取り除かれました。ただし、応答では、要求後に送信されるデータはありません。自動的にヘッダ「アクセス制御-Allow-に応答しないAPIへの呼び出しを作るための方法があります

function CallAjax() { 

var xhr = new XMLHttpRequest(); 
xhr.open("GET", "https://api.darksky.net/forecast/166731d8eab28d33a26c5a51023eff4c/43.11201,-79.11857", true); 
xhr.onload = function() { 
    console.log(xhr.responseText); 
    alert("sucuess"); 
}; 
xhr.send(); 
} 

CallAjax(); 

を：これは、ブラウザがCORSエラーをもたらす任意のヘッダーなしで作るの要求であります「http://localhost:9000/」、またはCORSエラーを防止し、応答とともにJSONデータを含むヘッダーを使用していますか？

ありがとうございました！

Answer 1

さらに詳しく調べると、クロスオリジン要求を許可しないAPIからデータを要求する際に、CORSエラーを克服する方法が2つあるようです。

1. APIからデータを要求し、そのデータをブラウザに提供するサーバー側スクリプトを作成します。
2. CORSエラーを引き起こさない適切なヘッダーで応答するAPIプロキシサービスを使用します。

Answer 2

fetch（）を使用してください。デフォルトではCORSを扱っているため、多くの問題を解決しました。ここで は例です：

fetch(url, { 
 
    method: 'post', 
 
    headers: { 
 
     "Content-type": "application/x-www-form-urlencoded; charset=UTF-8" 
 
    }, 
 
    body: JSON.stringify({foo:bar}) 
 
    }) 
 
    .then(function (resp){ 
 
    return resp.json() 
 
    }) 
 
    .then(function (data) { 
 
    console.log('Request succeeded with JSON response', data); 
 
    }) 
 
    .catch(function (error) { 
 
    console.log('Request failed', error); 
 
    });