stackoverflow에 처음 게시합니다.
jquery를 사용하여 json URL에서 데이터를 얻으려고합니다. 첫 번째 문제는 ajax cross origin js와 같이이 문제를 중지해야하는 라이브러리에서도 교차 원본 요청 블록이었습니다 (이 링크를 제공하지 않기 위해 죄송합니다. 여기에 2 개 이상의 링크를 포함하기에는 너무 새롭습니다). 여전히 운이 없으며 동일한 교차 출처 오류입니다.
그래서 JSONP로 옮겼습니다.
url = "http://take-home-test.herokuapp.com/api/v1/works.json?callback=?"
$.ajaxSetup({ dataType: "jsonp" });
$.getJSON(url, function(json) {
console.log(data);
});
(내가 시도한 JSONP 요청에 대한 AJAX 구문)
이제 네트워크 탭에서 데이터가 반환되지만 상태가 403 금지됨임을 알 수 있습니다. 크롬의 네트워크 탭에서 응답 사진
json MIME 유형에 문제가있는 크롬을 피하기 위해 npm으로 설치할 수있는 http-server를 사용하고 있습니다. 이 유사한 스택 오버플로 답변은 내 프레임 워크에 대한 jsonp 지원을 통합해야했지만 루비에 대한 sinatra를 참조하고 있다고 말합니다. 왜 JSONP 호출이 금지 된 403을 반환합니까? 그러나 URL은 브라우저에서 액세스 할 수 있으므로
npmjs jsonpclient를 사용해 보았지만 여전히 금지 된 응답을 받았습니다.
어떤 아이디어? 이로 인해 하루가 지났습니다.
문제 : 서버 ( http://take-home-test.herokuapp.com )에 'Access-Control-Allow-Origin'헤더가 설정되어 있지 않습니다. 서버에 액세스 할 수있는 경우 '--cors'옵션으로 시작하십시오. Aka : node bin / http-server --cors ... 이렇게하면 Access-Control-Allow-Origin 헤더를 통해 CORS가 활성화되고 문제가 해결됩니다.
서버에 대한 액세스 권한이없는 경우. 다음은 빠른 솔루션입니다. http://cors.io를 통해 요청을 프록시하십시오 . 아래를 참조하십시오.
url = 'http://take-home-test.herokuapp.com/api/v1/works.json?callback=?';
new_url = "http://cors.io/?u=" + encodeURIComponent( url );
$.ajaxSetup({ dataType: "jsonp" });
$.getJSON(new_url, function(json) {
console.log(json);
});
JSFiddle : http://jsfiddle.net/davemeas/4rt3s7ta/1/ (참고 : 해당 바이올린에 jQuery를 추가해야합니다. :))
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다