JSONP를 이용하여 Cross Domain 해결

[jquery] JSONP를 이용하여 Cross Domain 해결

Javascript/Tip, Solution 2012.05.29 20:52

Javascript의 보안 정책 중 하나인 SOP(Same-Origin Policy) 때문에 데이터를 호출하는 도메인과 데이터를 반환하는 도메인의 주소가 다르면 

ajax를 이용할 수 없다. 그러나 JSONP(JSON with Padding)를 이용하면 간단히 해결 가능하다.

원래 ajax의 코드는 아래와 같다. 그러나 아래 코드로는 Cross Domain에 직면했을때 정상적인 responseText를 얻을 수가 없다.

?

1 2 3 4 5 6 7 8 9 10 11 12 13

$.ajax({   type: "POST",   url: "search.do",   data: $('#searchbox').val(),   contentType: "application/x-www-form-urlencoded; charset=UTF-8",   success: function(data) {     if (data != null) {       // ...     } else {       //....     }   } });

1. JSONP를 이용한 Ajax 호출(Client)

 - 반환되는 데이터 (JSON)가 아래와 같다고 하자.

?

1 2 3 4

{   'result': 'user',   'go': '테스트' }

 - JSONP를 통한 호출은 아래와 같다. (두 가지 방법 중 아무거나 해도 상관없다.)

 1. $.getJSON()

?

1 2 3

$.getJSON("http://ip:8080/jsp/upload?id=user&callback=?", function(data) {   alert(data.result + ", " + data.go); });

 

 2. $.ajax();

?

1 2 3 4 5 6 7 8 9

$.ajax({   url: "http://ip:8080/jsp/upload",   dataType: "jsonp",   success: function(data) {     if (data != null) {       alert(data.result + ", " + data.go);     }   } });

 

jQuery 1.2부터는 JSONP 호출에 대한 네이티브 지원이 제공되고 있다. JSONP 콜백을 지정한 경우 다른 도메인에 있는 JSON 데이터를 로드할 수 

있으며 JSON 콜백은 url?callback=? 라는 구문을 사용하여 지정할 수 있다.

$.getJSON() 메소드를 자세히 살펴보면 URL 맨 끝에 callback= 이라는 문자열과 함께 ? 기호를 사용하고 있다. ? 문자열 자리에는 ajax 콜백   함수명이 들어가야 하는데, 만약 위의 샘플 코드와 같이 익명 함수를 콜백 함수로 지정한다면 ?기호를 쓰면 되고, 그렇지 않은 경우엔 실제 콜백  함수명을 적어주면 된다. 익명 콜백함수 사용시, ? 기호는 jquery가 ajax 호출시 익명 함수의 이름(예:jsonp1234567890)을 넘겨주게 된다.

2. JSON 반환(Server)

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

protected void doGet(HttpServletRequest request, HttpServletResponse response)     throws ServletException, IOException {   request.setCharacterEncoding("UTF-8");   response.setCharacterEncoding("UTF-8");     // 전송된 데이터를 추출(id와 콜백 메소드명)   String id = request.getParameter("id");   String callBack = request.getParameter("callback");     // 반환 될 데이터   JSONObject obj = new JSONObject();   obj.put("result", id);   obj.put("go", "테스트");     // 호출 할 javascript 콜백 메소드를 지정 해 준다.   PrintWriter out = response.getWriter();   out.write(callBack + "(" + obj.toString() + ")");   System.out.println(callBack + "(" + obj.toString() + ")");     out.flush();   out.close(); }

Serlvet으로 구현한 데이터 반환 메소드이다. JSONP는 Get방식으로만 데이터를 가져올 수 있으므로 doGet메소드에 로직을 작성하였다. 

위 코드를 살펴보면 먼저 전달받은 데이터들을 json 형태로 구성한 뒤 콜백함수의 이름으로 감싸줘야 한다. 

최종적으로 반환해야 할 문자열은 아래와 같다. 말 그대로 JSONP(json with padding)이다.

?

1	jQuery17204359748272690922_1338291446125({"result":"user","go":"테스트"})

3. 결과

-- 퍼옴 --