은성훈: JSONP로 cross domain문제 해결하기

지금 소개하는 방법은, 본인이 운영중인 두 개의 도메인간에 데이터를 주고받을 수 있게 해준다.
결코 자기와 상관없는 두 도메인간에 데이터를 주고 받지는 못한다.

그러면 시작해 보자.

해결해야할 문제

http://mydomain_2.co.kr/service.php 의 내용은 다음과 같다.

{"name":"silver", "age":"10"}

http://mydomain_1.co.kr/get_data.html 의 내용이 다음과 같다고 하자.

<script type="text/javascript">
      $.ajax({
        url: "http://mydomain_2.co.kr/service.php"
      })
      .done(function( j ) {
        alert( j.name );
      });
    </script>

http://mydomain_1.co.kr/get_data.html은 silver라고 표시하지 못한다.
그 이유는 jQuery가 인터넷의 평화를 위해서 서로 다른 도메인간에는 데이터를 읽어오지 못하도록 차단하기 때문이다.
mydomain_1.co.kr에서 mydomain_2.co.kr의 데이터를 가져오려고 하기때문에 jQuery가 훼방을 놓고있는 것이다.

해결방법

만약에 내가 mydomain_1.co.kr과 mydomain_2.co.kr을 통제할 수 있는 사람이라면, 위의 두 파일을 살짝 고쳐서 http://mydomain_1.co.kr/get_data.html이 silver라고 표시하도록 만들 수 있다.

http://mydomain_1.co.kr/get_data.html 의 내용을 다음과 같이 수정한다.

<script type="text/javascript">
      $.ajax({
        url: "http://mydomain_2.co.kr/service.php?callback=?"


,dataType : "jsonp"
      })
      .done(function( j ) {
        alert( j.name );
      });
    </script>

callback=? 라는 표현은 jQuery가 cross domain 기능을 제공하기위해 사용하는 키워드같은 것이다. 그대로 타이핑해 넣어야 한다.

http://mydomain_2.co.kr/service.php 의 내용을 다음과 같이 수정한다.

<?php
echo $_GET['callback'] . '({"name":"silver", "age":"10"})';
?>

JSON 데이터를 padding하고있는 이 모습을 가리켜 JSON with padding이라 말하고, JSONP라고 줄여서 말한다.
$_GET['callback']을 출력해보면 길이가 아주 긴 임의의 문자열인 것을 확인할 수 있다. 그 문자열은 jQuery가 즉흥적으로 만들어낸 함수이다. (아마도 json parser 함수일 것이다).

아무튼, 이제 http://mydomain_1.co.kr/get_data.html이 silver라고 표시하게 되었다.

-------------

service.php 파일을 다음과 같이 수정하면 "이것이 JSONP!!" 라고 화면에 출력된다.

<?php
echo "alert( '이것이 JSONP!!' )";
?>

파일을 더 간단하게 만든다면,

alert( '이것이 JSONP!!' )

JSONP가 어떻게 돌아가고 있는지 느낌이 오는가?

callback=? 만 넣어주면 jQuery는 상대방 서버가 보내온 데이터를 단순한 데이터가 아닌 실행해야 할 함수로 취급한다.
jQuery가 지어준 함수의 이름을 그대로 사용하면 json parser가 실행되고, 그 외의 javascript 함수이름을 사용하면 그 함수가 실행된다.

JSONP로 cross domain문제 해결하기

Translate