'Access-Control-Allow-Origin'が要求されたリソースに存在しないためJSONファイルを読み込めません

Question

Github RepoにあるJSONファイルからデータを取得しようとしました。私はちょうどXMLHttpRequest()を使用しています。

$(function() { 
    load(); 
    function load() { 
     var fetch = new XMLHttpRequest(); 

     fetch.open(
      "GET", 
      "https://github.com/prvnbist/Periodic-Elements-App-Using-JSON-And-JQuery/blob/master/elements.json", 
      true 
    ); 

    fetch.onload = function() { 
     if (this.status == 200) { 
      var elem = JSON.parse(this.responseText);` 
     } 
    } 
    } 
}); 

これはエラーです。

Failed to load https://github.com/prvnbist/Periodic-Elements-App-Using-JSON-And-JQuery/blob/master/elements.json: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://s.codepen.io' is therefore not allowed access.

コードは勿論、それは私に、セキュリティ目的のために合法的であるが、私はそれを回避することができていない、このエラーを与えているcodepenに、ローカルホスト上で完璧に動作します。あなたは、同一生成元ポリシーに実行されている、とブラウザがしっかりとGitHubのにアクセスするためにCORSを使用して示唆されhttps://codepen.io/prvnbist/pen/EwOapM

Answer 1

-

はここCodepenへのリンクです。しかし、GitHubsサーバーにアクセスして変更を加えることはできません。

GitHubはAPIではないため、CORSヘッダーは実装されていません。回避策は、RawGitのようなプロキシサービスを使用してファイルにアクセスすることです。