자바 스크립트는 서로 다른 도메인에 대한 요청을 보안상 제한합니다. 이 정책을 동일근원정책(Same-Origin Policy, SOP) 정책이라고 하며, 이러한 정책으로 인해 생기는 이슈를 cross-domain 문제라고 합니다.
개발을 하다보면 어쩔 수 없이 다른 도메인으로부터 데이터를 가져와야 하는 경우가 많기에 많은 사람들이 cross-domain 이슈를 겪고 있습니다.
이런 경우 사용할 수 있는 것이 JSONP(JSON with Padding)입니다. 처음 JSONP를 접했을 때 잘 정리가 되지 않았던, 사용할 때 명확히 알아야 할 것들을 정리해보았습니다.
1. JSONP 요청은 일반 AJAX 요청과 다르다
//-- JSON
$.ajax({
url: url,
dataType: 'json',
data: data,
success: callback
});
$.getJSON(url, data, callback);
//-- JSONP
$.ajax({
url: url,
dataType: 'jsonp',
jsonpCallback: "myCallback",
success: callback
});
$.getJSON(url + "?callback=?", data, callback);
dataType 만 변경하거나, 요청 url 뒤에 callback 파라미터 를 붙일 뿐입니다. 그렇지만 이것만으로도 완전히 다른 동작 을 하게 됩니다.
2. ‘JSONP’라는 데이터 타입 요청이 아닌 <script> 호출 방식
JSONP는 HTML의 script 요소로부터 요청되는 호출에는 보안상 정책이 적용되지 않는다는 점을 이용한 우회 방법 입니다.
다시 한번 확실히 하자면, script 요소는 src를 호출한 결과를 javascript를 불러와서 포함시키는 것이 아니고 실행시키는 태그입니다.
3. JSONP Callback은 서버에서 지원해줘야 한다
알아두어야 할 중요한 것은 응답 데이터는 Text형 이란 것과, callback 함수명으로 감싸진다 는 점 입니다.
"myCallback({'name':'test','age':28})"
$.ajax({ url: url, dataType: 'jsonp', jsonpCallback: "myCallback", success: callback });
$.getJSON(url + "?callback=?", data, callback);
위 요청을 해석해보자면,
- cross-domain 이슈를 회피하기 위하여 jsonp 요청을 한다
- 응답 데이터는 myCallback(결과) 형태의 text로 wrapping 되어질 것이다.
- myCallback이란 함수를 나의 success function에 mapping 시킬 것이다.
가 됩니다.
github.com/kingbbode/spring-jsonp-server
kingbbode/spring-jsonp-server
Jsonp Server Example. Contribute to kingbbode/spring-jsonp-server development by creating an account on GitHub.
github.com
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Kingbbode</title>
<script
src="https://code.jquery.com/jquery-2.2.4.min.js"
integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
crossorigin="anonymous"></script>
</head>
<body>
<script>
var url = 'http://localhost:9000/';
var static_json = 'http://localhost:9000/json/test.json'
$.ajax({
url: static_json,
dataType: 'jsonp',
jsonpCallback: "myCallback",
success: function(data){
console.log('ajax', data);
}
});
$.getJSON(url + "?callback=?", function(data){
console.log('getJSON', data);
});
</script>
</body>
</html>'프로그래밍 > Web' 카테고리의 다른 글
| [WEB] 인증서 오류 - "There is a problem with this website's security certificate" when you try to visit a secured website in Internet Explorer (0) | 2021.04.23 |
|---|---|
| 네이버 클라우드 플랫폼에서 장고(Django) 개발 환경 구성 및 활용하기 (0) | 2021.04.09 |
| [ASP] 페이지 로딩완료 전 로딩 이미지 보여주기 (0) | 2021.03.19 |
| REST API 제대로 알고 사용하기 (0) | 2021.03.17 |
| 전화대신 채팅상담 - channel.io (0) | 2020.12.04 |