XHR 상태가 정의되지 않았습니다.

Question

XHTML 요청을 REST API에 보내려고하지만 응답을 얻을 수 없습니다. 내가 execut 때,

<script> 
    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "http://www.mocky.io/v2/5a083d8e2f0000c61ee61140", true); 
    xhr.setRequestHeader("Content-type", "application/json"); 
    xhr.onreadystatechange = function() { 
    console.log("xhr.readyState: " + xhr.readyState); 

    if (xhr.readyState === XMLHttpRequest.DONE) { 
     console.log("xhr.status: " + xhr.status); 

     if (xhr.status === 200) { 
     console.log("xhr.responseText: " + xhr.responseText); 

     var response = JSON.parse(xhr.responseText); 
     } 
    } 
    } 
    xhr.send(); 
    console.log("xhr.readyState: " + xhr.readyState); 
    console.log("xhr.status: " + xhr.status); 
</script> 

xhr.status은 정의되지 않은 남아가 if (xhr.status === 200)에 입력하지 :

여기 내 코드입니다. 나는 이유를 모른다. 누군가 나를 도울 수 있습니까?

편집 :

오류에 대한 Access-Control-Allow-Origin입니다 : 내가 JSON을 고정하지만 난 여전히 오류가

그래서

Failed to load http://www.mocky.io/v2/5a083d8e2f0000c61ee61140 : Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403.

을, 나는 this topic 읽기 그게 내가 HTTP 헤더에 Access-Control-Allow-Origin : *을 추가해야한다고 n mocky.io. 나는 그것을 할 수 있지만, 아무것도 변하지 않는다 : 여기

을 새로운 mocky.io URL입니다 : 내 실수이고

이

http://www.mocky.io/v2/5a083d8e2f0000c61ee61140 

사람이 볼 수 있습니까?

Answer 1

그래, file:///C:/.../index.html에서 HTML 파일에 로컬로 액세스하면 Access-Control-Allow-Origin : *이 무시됩니다.

작동 시키려면 로컬 서버 (예 : this Chrome extension)를 탑재하고 HTTP (http://127.0.0.1:8887/index.html)를 통해 HTML 파일에 액세스해야합니다.

또는 this other Chrome extension을 사용하면 HTTP 응답의 헤더에 Access-Control-Allow-Origin : *이 자동으로 추가됩니다.