JavaScript- AJAX로 다른 도메인의 내용에 액세스하고 싶으십니까?

Question

OpenStreetMap API에서 데이터를로드하는 JavaScript 응용 프로그램을 작성하려고합니다 (http://wiki.openstreetmap.org/wiki/osm_protocol_version_0.6), 이것은 기본적으로 편안한 XML API입니다. XML에 액세스하기 위해 jQuery를 사용하려고합니다. 그러나 보안 오류가 발생합니다. 이것은 크로스 사이트 스크립팅 차단입니다.

해당 XML에 어떻게 액세스 할 수 있습니까? Afaik OSM은 JSONP를 제공하지 않으므로 작동하지 않습니다. 어쨌든 있습니까?>

Answer 1

Dan이 링크 한 블로그 게시물은이 문제를 해결하는 방법을 보여 주지만 다음은 배경입니다.

웹 페이지에서 크로스 도메인 JavaScript 호출을 할 수있는 유일한 방법은 JSONP를 통해입니다. JSONP가 제공되지 않으면 브라우저가 의도적으로 사이트 스크립트가 그러한 통화를하는 것을 방지하기 때문에 프록시 스크립트를 사용해야합니다.

Firefox 확장을 작성하는 경우 특권 공간에서 실행 중이므로 제한없이 이러한 크로스 도메인 호출을 할 수 있습니다.

Answer 2

라운드 크로스 사이트 스크립팅을 얻는 두 가지 방법은 서버 측 프록시를 호출하여 서버 측 프록시를 호출하는 서버 측 프록시를 설정하는 것입니다. 다른 방법은 크로스 사이트 호출에 제한이없는 스크립트 태그를 사용하여 데이터를 호출하는 것입니다.

Answer 3

OpenStreetMap의 NOMINATIM API는 이제 JSONP를 지원하므로 클라이언트 사이드 코드와 순수하게 데이터를 얻을 수 있으므로 자신의 서버에 추가로 필요하지 않습니다. 여기에 있습니다 jsfiddle 예시 - JSFiddle에서 할 수 있다면 어디서나 할 수 있습니다.

다른 도메인에서 API에 액세스하는 방법에 대한보다 일반적인 질문은 다음과 같은 부분적으로 완전하고 종종 모순되는 많은 답변을 통해 그리고 시행 착오를 통해 내가 배운 유용한 것들이 있습니다. 어떤 것이 있거나 부정확 한 경우 편집하거나 댓글을 달아주십시오.

• JSONP를 지원하는 API를 사용할 수없는 경우 다음과 같은 플러그인을 살펴 봐야합니다. jQuery-Xdomain-Ajax 같은 것들을 사용합니다 YQL 그리고 그들이 어떻게 작동하는지 이해합니다. 일반적 으로이 플러그인은 API를 쿼리하는 것보다 HTML을 더 많이 읽을 수 있습니다.
• API에 직접 액세스하려면 a) JSON과 B) JSONP 지원을 구축 한 결과는 다음을 의미합니다.
  • API는 결과를 래핑 할 함수 이름을 알려주는 매개 변수를 듣도록 설정해야합니다.
  • 해당 매개 변수가 무엇인지 찾아야합니다. OSM의 경우 호출됩니다 json_callback, jQuery의 기본값 callback 우연히 API가 듣도록 프로그래밍되는 경우에만 작동합니다.
  • jQuery를 사용하면이 API 특정 매개 변수 키가 쿼리 URL의 끝에 있어야합니다. ? (예 : 그렇다면 json_callback, 그 다음에 someurl.com/api?json_callback=?). jQuery는 이것이 무엇인지 알아 내고, 교환합니다 ? 문자열과 같은 경우 jQuery1712164863864387412, 인라인 함수의 이름을 동일한 문자열로 이름을 지정하고 이름으로 기능을 트리거하고 JSON을 전달하는 일부 코드를 받기를 기다립니다.
    • 요청이 작동하지만 콜백이 발사되지 않고 다음과 같은 오류가 나타납니다. parseerror jQuery17109935275333671539_1300495251986 was not called, 그것은 jQuery가 이름, Ready and Waiting의 함수를 의미하지만 API는 해당 문자열을 사용하여 JSON을 랩핑하지 않아 기능을 호출하지 못했습니다.
  • jQuery가 없으면 해당 매개 변수 키 JSON을받을 지명 된 함수의 이름을 전달해야합니다.
• 본질적으로 발생하는 모든 일은 브라우저가로드 된 다음 JavaScript 코드의 스 니펫을 실행하는 제어 방식으로로드하는 것입니다. someFunction({"some": "argument"});, 오류 처리가 제한되어 있습니다 (그러나 전체를 사용하는 경우 jQuery가 제공하는 JSFiddle을 참조하십시오. $.ajax 박탈 대신 구문 $.getJSON 지름길)
• FireBug에서 적어도 JSONP 요청은 다른 Ajax 호출과 같이 콘솔에 나타나지 않습니다. 오히려 네트 패널의 맨 아래에 있습니다 (후드 아래에서는 본질적으로 둥근 로딩 방법입니다. 코드, Say와 같은 것을 다루었습니다 <script>).

바라건대 이것은 누군가를 도울 것입니다!