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

05.JSP2014. 4. 1. 16:53

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

출처 : http://warmz.tistory.com/739

Ajax 로 다른 도메인에 있는 url 을 호출해 데이터나 HTML을 가져오는건 보안상 안된다고 한다. 되면 참 좋을텐데;;

뭐 아무튼 이걸 해결하기 위한 방법으로 JSONP 라는 형식으로 호출하던가 아니면 Proxy Servlet 을 하나 맹글어 그 서블릿을 거쳐 HttpClient 로 가져오는 방법, 훌래쉬를 이용하는 방법이 있다고 한다.!

그중에서 이번엔 JSONP 형식으로 호출하는 방법을 연구해 보겠다.

JSONP 형식이란 뭐 별건 아닌것 같고 기존에 서버에서 리턴해 주던

{"key1" : "value1", "key2" : "value2"} 요런 json 문자열을

callback({"key1" : "value1", "key2" : "value2"}); 요런식으로 임의의 함수를 호출해 주는 형식의 문자열로 리턴해 주는것을 말하는것 같다.

즉, jsonp 로 ajax 호출을 하기 위해선 아무 url 이나 안되고 callback({"key1" : "value1", "key2" : "value2"}); 요런식으로 함수안에 json 문자열이 들어간 형식으로 서버에서 리턴을 해줘야 가능하다.

각설하고 jQuery를 활용해 맹글어 보자.

jQuery에서 jsonp 호출하는 방법#1

1

2

3

$.getJSON("http://127.0.0.1:8080/server/data.jsp?callback=?", function(d){
    //d.key;
});

jQuery에서 jsonp 호출하는 방법#2

$.ajax({
    url : "http://127.0.0.1:8080/server/data.jsp",
    dataType : "jsonp",
    jsonp : "callback",
    success : function(d){
        // d.key;
    }
});

방법#1 이나 방법#2는 작동하는게 동일하다. 취향에 맞게 쓰임새에 맞게 쓰면된다. 개인적으로 방법#2 를 여러가지 원하는 ajax 호출 옵션을 줄수 있어서 더 좋아한다.

살짝 설명해 보면 방법#2 에서 쓴 ajax 옵션중 jsonp는 데이터를 넘겨줄 서버에서 받는 callback 함수명 파라메터이다. 서버에 따라 원하는 callback 함수명을 적어줘야 한다. 방법#1을 보면 대충 이해할 수 있다.

jsonp 옵션에다 적어준 함수명은 ajax 호출 url 뒤에다 방법#1에서 처럼 파라메터 형식으로 자동 추가된다.

전체소스코드 client.html

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Jsonp test with jquery</title>
     
    <script type="text/javascript" src="/resource/js/jquery-1.6.2.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#testBtn").click(function(){
                $.getJSON("http://127.0.0.1:8080/server/data.jsp?callback=?", function(d){
                    $.each(d, function(k, v){
                        $("#getjson").append("<div>" + k + " : " + v + "</div>");
                    });
                    $("#getjson").show();
                });
                             
                $.ajax({
                    url : "http://127.0.0.1:8080/server/data.jsp",
                    dataType : "jsonp",
                    jsonp : "callback",
                    success : function(d){
                        $.each(d, function(k, v){
                            $("#ajax").append("<div>" + k + " : " + v + "</div>");
                        });
                        $("#ajax").show();
                    }
                });
            });
        });
    </script>
     
    <style>
        div{margin-bottom:10px;padding:2px;}
        #getjson{border:1px solid red;display:none;}
        #ajax{border:1px solid blue;display:none;}
    </style>
</head>
 
<body>
    <button id="testBtn">테스트!</button>
    <div id="getjson"></div>
    <div id="ajax"></div>
</body>
</html>

다음으로 간단한 테스트를 위해 초간단 심플 데이터 제공용 jsp 파일을 하나 맹글어 보자. JSON 변환용 라이브러리로 Jackson JSON Processor를 사용했다.

<%@ page language="java" contentType="text/javascript; charset=UTF-8" pageEncoding="UTF-8"%>
 
<%@ page import="java.io.StringWriter"%>
<%@ page import="java.util.HashMap"%>
<%@ page import="java.util.Map"%>
 
<%@ page import="org.codehaus.jackson.map.ObjectMapper"%>
 
<%
    Map<String, String> dummyData = new HashMap<String, String>();
    dummyData.put("value1", "값1");
    dummyData.put("value2", "값2");
    dummyData.put("value3", "값3");
    dummyData.put("value4", "값4");
     
    StringWriter sw = new StringWriter();
     
    // Jackson JSON Mapper 를 사용해서 Map 을 JSON 문자열로 변환
    ObjectMapper mapper = new ObjectMapper();
    mapper.writeValue(sw, dummyData);
     
    request.setAttribute("sw", sw);
%>
 
<%-- ajax 에서 넘겨준 callback 함수 파라메터 가져오기 --%>
${param.callback}(${sw});