Impossible de charger le fichier JSON en raison de l'absence de 'Access-Control-Allow-Origin' sur la ressource demandée

Question

J'ai essayé d'obtenir des données à partir d'un fichier JSON qui se trouve dans un Github Repo. J'utilise juste 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);` 
     } 
    } 
    } 
}); 

C'est l'erreur que j'obtiens!

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.

Le code fonctionne parfaitement sur localhost, mais ofcourse codepen il me donne cette erreur qui est légitime pour des raisons de sécurité, mais je n'ai pas été en mesure de contourner le problème.

Voici le lien vers Codepen - https://codepen.io/prvnbist/pen/EwOapM

Answer 1

Vous exécutez dans la même politique d'origine, et le navigateur est ce qui suggère à l'aide CORS pour accéder en toute sécurité GitHub. Mais vous n'avez pas accès aux serveurs GitHubs pour effectuer ce changement.

GitHub n'est pas une API et n'implémente donc pas les en-têtes CORS. La solution de contournement consiste à utiliser un service proxy tel que RawGit pour accéder à vos fichiers.