jQuery의 JSONP 를 사용한 크로스 도메인 통신
AJAX를 이용하여 페이지간 비동기 통신을 하는데
서로 주고받는 데이터는 text, XML, JSON type으로 많이 쓰인다.
하지만 AJAX 호출을 필요로 하는 기능에서 보안상 이유로 동일 서버 이외에는 접근할수가 없다.
( not allow access.. 어쩌고 저쩌고 에러 메세지가 나온다.)
자바스크립트(Javascript) 보안 정책 중에 하나인 동일근원정책(Same-Origin Policy) 정책에 걸리는 부분이 바로 크로스 도메인을 할때 일어난다. 서로 다른 도메인에서 자바스크립트로 접근하려 했을 때 혹은 다른 서버에 Ajax통신의 결과를 받을 때 보안상 접근을 거부한다는 뜻이다.
* 동일 근원 정책 참조 >>
동일출처정책(Cross domain 이슈)
그 부분을 해결하는 부분의 하나가 jQuery의 JSONP이다.
* JSONP 구현 참조 >>
jQuery의 JSONP을 사용한 크로스도메인간 통신
http://www.codejs.co.kr/jquery-jsonp/
CrossDomain Ajax 호출 #1 : jQuery JSONP ajax 호출 이용.
[Tip] JSONP를 이용하여 Cross Domain 해결
* JSONP 구현 코드 >>
//자바 스크립트 코드 - 원격 서버에 요청
http://{request_ip}/reqeust.php
function testJSON(gw_name, ip) {
/*
//도메인 내 통신 : callback 함수의 개념이 없다. JSON type의 Data만 리턴해주면 됨
$.ajax({
type:"POST",
url : "test.php",
data : "id=user",
dataType : "json",
success: function(data) {
if(data != null) {
alert(data.message );
}
}
});
*/
//크로스 도메인 통신 1 : : callback 함수의 개념이 필수. JSON type의 Data를 Callback함수로 감싸서 리턴해줘야 됨
$.ajax({
type:"POST",
url : "http://"+ip+"/test2.php",
data : "ref1="+gw_name,
dataType : "jsonp",
jsonpCallback : "myCallback",
success: function(data) {
console.log('성공 - ', data);
if(data != null) {
alert(data.message + "[" + data.time + "]" + data.gate_name);
}
},
error: function(xhr) {
console.log('실패 - ', xhr);
}
});
/*
//크로스 도메인 통신 2. : callback 함수면을 임의(자동)로 생성해줌
$.getJSON("http://"+ip+"/test2.php?id=user&callback=?",
function(data) {
alert(data.message);
}
);
*/
}
//원격서버에서 결과 값 리턴 부분
<?php
header('Content-Type: application/javascript;charset=UTF-8');
$ref1 = $_REQUEST['ref1'];
$dtime = date("Y-m-d H:i:s");
$callback = $_REQUEST['callback']; //request 쪽에서 명시한 myCallback에 해당한다. 명시적일때 굳이 변수로 받지 않고 그냥 myCallback이라고 적어줘도 된다. 단, 크로스 도메인 통신 2 경우처럼 임의 생성될때는 이름을 모르니 이렇게 받아서 아래쪽에서 함수명을 완성하여 콜백해준다.
$arr = array("message" => "You got an AJAX response via JSONP from another site! ", "time" =>$dtime, "gate_name" => $ref1);
$json_val = json_encode($arr);
//echo "${param.callback}(".$json_val.");";
echo $callback."(".$json_val.")";
?>
출처 : http://blog.naver.com/sheis0/120208400734