'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.

여기 Codepen에 대한 링크입니다 - https://codepen.io/prvnbist/pen/EwOapM

Answer 1

당신은 같은 원본 정책으로 실행하고 브라우저 CORS 안전하게 GitHub에 액세스하는 데 사용 제안한다. 하지만 GitHubs 서버에 액세스 할 권한이 없습니다.

GitHub는 API가 아니므로 CORS 헤더를 구현하지 않습니다. 해결 방법은 RawGit과 같은 프록시 서비스를 사용하여 파일에 액세스하는 것입니다.