[javascript] XmlHttpRequest 오류 : Access-Control-Allow-Origin에서 Origin null을 사용할 수 없습니다.

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...
  });
});



답변

기록을 위해, 내가 알 수있는 한 두 가지 문제가 있습니다.

  1. “jsonp”형식 지정자를에 전달하지 않았 $.get으므로 일반 XMLHttpRequest를 사용하고있었습니다. 그러나 브라우저는 서버가 확인한 경우 도메인 간 XMLHttpRequest를 허용하도록 CORS (Cross-Origin Resource Sharing)를 지원했습니다. Access-Control-Allow-Origin헤더가 들어온 곳 입니다.

  2. file : // URL에서 실행한다고 언급했다고 생각합니다. CORS 헤더가 도메인 간 XHR이 정상임을 알리는 두 가지 방법이 있습니다. 하나는 Access-Control-Allow-Origin: *(당신이 Flickr를 통해 Flickr에 도달했다면 $.get, 그들이하고 있었을 것임) 보내는 것이고, 다른 하나는 Origin헤더 의 내용을 에코하는 것 입니다. 그러나 file://URL은 null Origin을 생성하여 에코 백을 통해 승인 할 수 없습니다.

첫 번째는 Darin의 사용 제안에 의해 로터리 방식으로 해결되었습니다 $.getJSON. callback=?URL에 하위 문자열이 있으면 요청 유형을 기본값 인 “json”에서 “jsonp”로 변경하는 것은 약간의 마술 입니다.

더 이상 file://URL 에서 CORS 요청을 수행하려고 시도하여 두 번째 문제를 해결했습니다 .

다른 사람을 명확히하기 위해 간단한 문제 해결 지침은 다음과 같습니다.

  1. JSONP를 사용하려는 경우 다음 중 하나에 해당해야합니다.
    • 사용 $.get하고로 설정 dataType했습니다 jsonp.
    • URL을 사용 중이며 URL에 $.getJSON포함 callback=?되어 있습니다.
  2. CORS를 통해 도메인 간 XMLHttpRequest를 수행하려는 경우 …
    1. 를 통해 테스트하고 있는지 확인하십시오 http://. 통해 실행되는 스크립트 file://는 CORS를 제한적으로 지원합니다.
    2. 브라우저가 실제로 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을 넣을 수 있습니다.