본문 바로가기
일상의 조각

크로스 도메인 통신

by 로드러너 2014. 1. 6.
336x280(권장), 300x250(권장), 250x250, 200x200 크기의 광고 코드만 넣을 수 있습니다.

JavaScript 코드는 자신이 로드된 도메인만 통신이 가능하다. 즉, 크로스 도메인과는 통신할 수 없다. 이러한 규칙은 AJAX 통신에서도 동일하게 적용된다. 이러한 규칙은 여러가지 Open API에 접근해서 클라이언트 매시업 기능을 필요료 하는 웹앱에서는 문제가 된다.

또한, 웹앱을 네이티브앱으로 전환하는 경우 모바일 기기의 로컬에서 외부 서버에 액세스를 할 수가 없다.

이런 이유로 jQuery Mobile 웹앱이 네이트브앱으로 전환되면 모든 통신이 동작하지 않는다(jQuery Mobile은 모든 통신이 AJAX에 의해서 이루어 진다).

두가지 문제점을 jQuery Mobile에서 해결할 수 있는 방법은 다음과 같다.

 

 

jQuery Mobile 웹앱에서 Open API 데이터 이용

 

jQuery Mobile은 다음 페이지 내용을 서버에 요청해서 가져오는 방식으로 동작한다. 따라서, 웹앱 페이지 내에서 javascript로 Open API의 데이터를 직접 받아올 수 없다. 대신 서버에서 Open API의 데이터를 직접 받아와서 페이지를 완성한 후에 웹앱으로 보내줘야 한다.

 

 

jQuery Mobile 웹앱을 폰갭(PhoneGap)등으로 네이티브앱으로 변환할 경우

 

jQuery Mobile은 서버에 요청해서 결과 페이지를 받아오기 위해서는 '동일 출처 정책(same origin policy)'으로 서버에 요청할 수 없다. 이런 경우 mobileinit 이벤트 내에서 다음 코드를 삽입함으로써 해결할 수 있다.

 

$(document).bind("mobileinit", function(){

$.support.core = true;    //jQuery의 $.ajax() 메소드가 크로스 도메인 페이지를 로드할 수 있도록 한다.

$.mobile.allowCrossDomainPages = true;    //jQuery Mobile API가 크로스 도메인 페이지를 로드할 수 있도록 해준다.

});

 

 

 

[영어회화] Can I get a ride? 나를 태워다 줄 수 있어요?