본문 바로가기
Study Hard/짧은개발지식.

[짧은개발지식] JSONP (JSON Padding) 이란?

by 코플+ 2023. 6. 22.
JSONP
(JSON Padding)

 

JSONP 를 이용해서 가져오면 다른 도메인에 있는 json 파일도 가져올수 있고,  바로 불러와서 사용할 수 있으니 익혀두자.

우선 api이용이나 다른서버에 요청해서 데이터를 가져올때 생기는 문제는 CORS 문제가 있다.

 

CORS 란?(Cross-Origin Resource Sharing)
CORS는 Cross-Origin Resource Sharing의 약자로, 웹 애플리케이션에서 다른 도메인 간에 리소스를 안전하게 공유할 수 있도록 해주는 메커니즘입니다. 기존의 동일 출처 정책(Same Origin Policy)에서의 제한을 우회하여, 다른 도메인에 있는 리소스에 접근할 수 있는 방법을 정의하고 있습니다. 서버는 응답 헤더인 "Access-Control-Allow-Origin"을 사용하여 특정 도메인에서 오는 요청을 허용할 수 있습니다. CORS는 다양한 옵션과 설정을 제공하여 세밀한 제어를 할 수 있습니다. 따라서, AJAX 요청 등을 통해 다른 도메인에 있는 데이터에 접근해야 하는 경우, CORS를 적절하게 설정하여 사용하는 것이 권장됩니다.

 

JSONP 의 구조에 대해 보자

 

flickr api에 접근한다는 가정을 해보자.

 

flickr api에 대한 접근은 아래에서 가능하다.

https://www.flickr.com/services/feeds/docs/photos_public/

 

Flickr 서비스

공개 피드 일부 기준과 일치하는 공개 컨텐츠 목록을 리턴합니다. URL https://www.flickr.com/services/feeds/photos_public.gne 문자열 매개 변수 쿼리 id (선택적) 단일 사용자 ID입니다. 이는 컨텐츠를 가져올

www.flickr.com

 

https://www.flickr.com/services/feeds/photos_public.gne?tags=cat&format=json 

- format에 json의 쿼리스트링을 보내주면 json 형식으로 불러올 수 있다.

 

 

직접 요청한 json파일을 열어보면 json은 메소드에 담겨진 형태로 보인다. 이게 JSONP에서 말하는 padding의 역할이다.

이렇게 json형식을 callback 해서 바로 가져올 수 있게된다.

댓글