jQuery의 AJAX 지원을 통해 Flickr 및 Panoramio에서 이미지를 가져 오는 페이지를 개발 중입니다.
Flickr 측은 정상적으로 작동하지만 $.get(url, callback)
Panoramio에서 시도 할 때 Chrome 콘솔에 오류가 표시됩니다.
XMLHttpRequest는 http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150 로드 할 수 없습니다 . Access-Control-Allow-Origin에서는 원점 널을 사용할 수 없습니다.
브라우저에서 해당 URL을 직접 쿼리하면 정상적으로 작동합니다. 무슨 일이 일어나고 있습니까? 내 쿼리를 잘못 작성하고 있습니까, 아니면 Panoramio가 내가하려는 일을 방해하기 위해하는 일입니까?
Google은 오류 메시지 에서 유용한 일치 항목을 찾지 못했습니다 .
편집하다
다음은 문제를 보여주는 샘플 코드입니다.
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';
$.get(url, function (jsonp) {
var processImages = function (data) {
alert('ok');
};
eval(jsonp);
});
});
편집 2
이에 대한 도움을 주신 Darin에게 감사드립니다. 위의 코드가 잘못되었습니다. 대신 이것을 사용하십시오 :
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';
$.get(url, function (data) {
// can use 'data' in here...
});
});
답변
기록을 위해, 내가 알 수있는 한 두 가지 문제가 있습니다.
-
“jsonp”형식 지정자를에 전달하지 않았
$.get
으므로 일반 XMLHttpRequest를 사용하고있었습니다. 그러나 브라우저는 서버가 확인한 경우 도메인 간 XMLHttpRequest를 허용하도록 CORS (Cross-Origin Resource Sharing)를 지원했습니다.Access-Control-Allow-Origin
헤더가 들어온 곳 입니다. -
file : // URL에서 실행한다고 언급했다고 생각합니다. CORS 헤더가 도메인 간 XHR이 정상임을 알리는 두 가지 방법이 있습니다. 하나는
Access-Control-Allow-Origin: *
(당신이 Flickr를 통해 Flickr에 도달했다면$.get
, 그들이하고 있었을 것임) 보내는 것이고, 다른 하나는Origin
헤더 의 내용을 에코하는 것 입니다. 그러나file://
URL은 nullOrigin
을 생성하여 에코 백을 통해 승인 할 수 없습니다.
첫 번째는 Darin의 사용 제안에 의해 로터리 방식으로 해결되었습니다 $.getJSON
. callback=?
URL에 하위 문자열이 있으면 요청 유형을 기본값 인 “json”에서 “jsonp”로 변경하는 것은 약간의 마술 입니다.
더 이상 file://
URL 에서 CORS 요청을 수행하려고 시도하여 두 번째 문제를 해결했습니다 .
다른 사람을 명확히하기 위해 간단한 문제 해결 지침은 다음과 같습니다.
- JSONP를 사용하려는 경우 다음 중 하나에 해당해야합니다.
- 사용
$.get
하고로 설정dataType
했습니다jsonp
. - URL을 사용 중이며 URL에
$.getJSON
포함callback=?
되어 있습니다.
- 사용
- CORS를 통해 도메인 간 XMLHttpRequest를 수행하려는 경우 …
- 를 통해 테스트하고 있는지 확인하십시오
http://
. 통해 실행되는 스크립트file://
는 CORS를 제한적으로 지원합니다. - 브라우저가 실제로 CORS를 지원 하는지 확인하십시오 . (오페라와 인터넷 익스플로러는 파티에 늦었다)
- 를 통해 테스트하고 있는지 확인하십시오
답변
호출 된 스크립트에 HEADER를 추가해야 할 수도 있습니다. 여기 PHP에서해야 할 작업이 있습니다.
header('Access-Control-Allow-Origin: *');
도메인 간 AJAX ou services WEB (프랑스어)에 대한 자세한 내용 .
답변
간단한 HTML 프로젝트의 경우 :
cd project
python -m SimpleHTTPServer 8000
그런 다음 파일을 찾아보십시오.
답변
Chrome v5.0.375.127에서 작동합니다 (알림이 표시됨).
$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
alert(json.photos[1].photoUrl);
});
또한 $.getJSON()
이전 버전은 IE8 (적어도 내 컴퓨터에서는)에서 작동하지 않으므로 대신 메소드 를 사용하는 것이 좋습니다 .
$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
alert(json.photos[1].photoUrl);
});
여기에서 온라인으로 사용해 볼 수 있습니다 .
최신 정보:
코드를 보여 주었으므로 문제가 있음을 알 수 있습니다. 익명 함수와 인라인 함수를 모두 가지고 있지만 둘 다 호출 processImages
됩니다. 이것이 jQuery의 JSONP 지원이 작동하는 방식입니다. callback=?
익명 함수를 사용할 수 있도록 정의하는 방법에 주목하십시오 . 자세한 내용은 설명서를 참조하십시오 .
또 다른 언급은 eval을 호출해서는 안된다는 것입니다. 익명 함수에 전달 된 매개 변수는 이미 jQuery에 의해 JSON으로 구문 분석됩니다.
답변
요청 된 서버가 JSON 데이터 형식을 지원하는 한 JSONP (JSON Padding) 인터페이스를 사용하십시오. 프록시 서버 나 멋진 헤더를 사용하지 않고도 외부 도메인 요청을 할 수 있습니다.
답변
그것은이다 동일 출처 정책 , 당신은 JSON-P 인터페이스 또는 동일한 호스트에서 실행중인 프록시를 사용합니다.
답변
http.conf
파일을 통해 파일을 관리했습니다 (HTTP 서비스를 편집 한 후 다시 시작).
<Directory "/home/the directory_where_your_serverside_pages_is">
Header set Access-Control-Allow-Origin "*"
AllowOverride all
Order allow,deny
Allow from all
</Directory>
에서 Header set Access-Control-Allow-Origin "*"
, 당신은 정확한 URL을 넣을 수 있습니다.