AngularJS에서 JSONP 인스턴스 구문 분석

개념

우선 Json과 JSONP는 다릅니다. Json은 많은 데이터 저장 형식 중 하나이자 데이터 쓰기 방법 중 하나입니다. 중화권의 많은 시(예: 칠자시) 중 하나와 같습니다. 이 시 스타일은 다음과 같이 규정합니다. 이 시 스타일에는 제목, 시 한 줄당 단어 수(7 단어) 등이 포함되어야 합니다. 텍스트 형식. Json에서 지정하는 텍스트 형식은

(Json 형식 다이어그램)

과 같습니다. JSONP의 경우 특수한 통신 방법으로 사용할 수 있습니다. 브라우저의 동일 출처 보안 제한을 쉽게 우회하고 다양한 소스에서 리소스(스크립트, 이미지, 기타)를 로드하는 효과를 얻을 수 있습니다. 예를 들어, 당신은 왕국의 왕자인데, 근처의 작은 마을(자원)에서 아름다운 어린 소녀와 예기치 않게 사랑에 빠졌습니다. 그녀를 만나고 더 발전하고 싶습니다(자원 얻기). 그러나 당신의 아버지 킹 씨(브라우저)는 동의하지 않습니다. 왕은 이 소녀가 왕실 소녀(비원본 자원)가 아니며 왕자에게 합당하지 않다고 생각하면서 왕자를 성에 가두어 둡니다. 성 밖에도 공개했는데, 감시하는 병사들이 많아 외부인 출입이 금지됐다. (브라우저의 동일 출처 보안 제한) 하지만 왕자는 사랑에 매우 끈질겼고, 내시 오바에게 아름다운 소녀에게 편지를 가져오라고 요청하는 등 여러 방법을 시도했지만(PUT, GET, POST 등) 도시에 도착할 때마다 Gate, , 군인은 편지의 주소가 어린 소녀의 주소임을 알아차리고 내시의 외출을 반복적으로 금지했습니다(외부 자원을 얻을 때 PUT, GET 및 POST가 작동하지 않음). 그래서 왕자는 JSONP라는 특별한 통신 방법을 생각했습니다. 작은 비둘기는 군인의 감독을 피해(브라우저의 동일 출처 보안 제한을 우회) 소녀와 통신할 수 있습니다. 도메인 간 리소스 공유 CORS가 구현되었습니다! O(∩_∩)O). 온갖 어려움을 겪은 끝에 마침내 왕자는 내시와 사랑에 빠졌습니다 (∑(とД °;)tti 인생은 놀라움으로 가득 차 있습니다...)

구체적인 구현 방법

이러한 통신 효과를 얻으려면 왕자(요청을 보내는 방법)와 소녀(서버)가 모두 준비되어야 합니다.

왕자가 JSONP 요청을 보낼 때 먼저 비둘기(Jsonp 사용)가 필요합니다. 다음으로 비둘기에 연결된 편지(주소 표시줄의 콜백 매개변수)가 필요합니다.

$http .jsonp("https://api.github.com?callback=CALLBACK").success(function(data){//...})

소녀가 비둘기를 받았을 때 편지를 받은 후 , 작은 비둘기의 편지에 내용을 쓰고 다시 작성해야 합니다(콜백 매개변수를 사용하여 응답 내용을 JavaScript 매개변수로 래핑하고 요청에 해당하는 콜백 함수로 호출)

메서드 패키징 데이터

res.send([콜백 함수] + '('+ JSON.stringify(result) + ')');

기타 세부정보

사용 시 JSONP, AngularJS는 <script> 태그를 생성하여 DOM에 삽입하여 응답이 성공한 후 노드가 삭제됩니다(노드 삭제의 특정 Angular 버전은 다를 수 있음)</script>

　그 중 CALLBACK은 이 요청을 위해 특별히 생성된 사용자 정의 함수, 즉

$http.jsonp("https://api.github.com?callback=CALLBACK") 으로 대체됩니다. ..)는

이 됩니다. JSONP의 백엔드 서비스를 직접 개발하려면 요청에 지정된 콜백 함수에 응답 데이터가 포함되어 있는지 확인해야 합니다

참고

JSONP를 사용하면 JSONP가 허용하기 때문에 잠재적인 보안 위험이 있습니다. 서비스는 애플리케이션의 JavaScript를 호출하므로 사이트가 취약해지고 사용자 개인정보가 노출될 수도 있습니다