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/
https://www.flickr.com/services/feeds/photos_public.gne?tags=cat&format=json
- format에 json의 쿼리스트링을 보내주면 json 형식으로 불러올 수 있다.
직접 요청한 json파일을 열어보면 json은 메소드에 담겨진 형태로 보인다. 이게 JSONP에서 말하는 padding의 역할이다.
이렇게 json형식을 callback 해서 바로 가져올 수 있게된다.
'Study Hard > 짧은개발지식.' 카테고리의 다른 글
[자바스크립트] location.href 와 location.replace()의 미묘한 차이점 (0) | 2023.06.26 |
---|---|
[짧은개발지식] 버블정렬 - Js코드로 만들어보기 (0) | 2023.06.23 |
[자바스크립트] console.log로 디버깅이나 값 확인 시 주의점!! (0) | 2023.06.23 |
[짧은개발지식] URL 과 URI 의 차이는 뭘까? (0) | 2023.06.07 |
댓글