jquery ' s jsonp는 예제를 설명했습니다
- William Shakespeare원래의
- 2025-02-17 10:34:10164검색
키 포인트 요약
JSONP (Padding with Padding)는 크로스 도메인 Ajax 호출을 허용하여 스크립트가 다른 소스의 데이터에 액세스하는 것을 제한하는 상 동성 정책을 우회합니다. 이는 브라우저가 해석 할 수있는 함수 호출이 포함 된 서버를 반환하여 수행됩니다.
JSONP는 다른 소스의 데이터를 가져오고 다양한 서비스의 컨텐츠에 액세스하는 데 유용하지만 몇 가지 제한 사항도 있습니다. JSONP는 크로스 도메인 GET 요청 만 수행 할 수 있으며 서버에서 명시 적으로 지원해야합니다. 또한 XSS (Cross-Site Scripting) 공격의 가능성을 열어 잠재적 인 보안 문제가 있습니다.
- 이 기사는 2016 년 6 월 23 일에 품질 문제를 해결하기 위해 업데이트되었습니다. 오래된 기사와 관련된 의견이 삭제되었습니다. 웹 기반 애플리케이션을 개발하고 통제하지 않은 도메인에서 데이터를로드하려는 경우 브라우저의 콘솔에서 다음 메시지를 볼 수 있습니다. XMLHTTPREQUEST https : //www.php. .CN/LINK/0DF0DBFC4725C2259DC0BB045E9BF6D2
- 는 'Access-Control-Origin'헤더가 요청 된 자원에 있습니다 ' 그러므로 액세스가 허용되지 않습니다. 이 기사에서는 jQuery 및 JSONP를 사용 하여이 오류의 원인 과이 문제를 해결하는 방법을 살펴 봅니다.
- 동일한 원산지 정책
<code class="language-javascript">$.getJSON(
"http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
function(json) { console.log(json); }
);</code>
가능한 솔루션
속성을 JSON 파일로 설정하고 페이지에 주입 할 수 있습니다. 이것이 작동하는 동안, 우리는 포함 된 데이터에 액세스 할 수 없기 때문에 우리에게는 많은 도움이되지 않습니다.
JSONP의 초보자
JSONP (패딩이있는 JSON을 대신하여)는이 기술을 기반으로하며 반환 된 데이터에 액세스 할 수있는 방법을 제공합니다. 브라우저가 해석 할 수있는 함수 호출 ( "대중")이 포함 된 서버를 반환하여 구현됩니다. 이 기능은 JSONP 응답을 평가하는 페이지에 정의되어야합니다. <script></script>
src
<code class="language-javascript">var script = $("<script>", {
src: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
type: "application/json"
}
);
$("head").append(script);</script></code>
타사 api
URL의 끝에서 는 jQuery에게 JSON 대신 JSONP 요청을 처리한다고 알려줍니다. 그런 다음 jQuery는 콜백 함수를 자동으로 등록하며 요청이 반환 될 때 호출됩니다. jsonCallback
<code class="language-javascript">function jsonCallback(json){
console.log(json);
}
$.ajax({
url: "http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-2.json",
dataType: "jsonp"
});</code>
에이전트 사용 >
cors
logResults
<code class="language-javascript">$.getJSON(
"http://run.plnkr.co/plunks/v8xyYN64V4nqCshgjKms/data-1.json",
function(json) { console.log(json); }
);</code>
JSONP를 사용하면 상 동성 정책을 우회 할 수 있으며 어느 정도까지 도메인 크로스 도메인 ajax 전화를 걸 수 있습니다. 마법의 알약은 아니며 물론 문제가 있지만 경우에 따라 데이터가 다른 소스에서 가져 오면 귀중한 것으로 판명 될 수 있습니다. JSONP를 사용하면 다양한 서비스에서 다양한 컨텐츠를 추출 할 수 있습니다. 잘 알려진 많은 웹 사이트는 사전 정의 된 API를 통해 컨텐츠에 액세스 할 수있는 JSONP 서비스 (예 : FLICKR)를 제공합니다. ProgrammableWeb API 디렉토리에서 전체 목록을 찾을 수 있습니다. (중복 정보를 피하기 위해 원본 텍스트에 따라 조정 및 단순화 된 FAQ 부품입니다) JSONP에 대한 FAQS (FAQ)
JSON과 JSONP의 주요 차이점은 무엇입니까?
JSONP는 어떻게 동일한 원래 정책을 우회합니까? JSONP는 패딩 또는 "채우기 요청"메소드를 사용하여 상동 정책을 우회합니다. 이 방법에서 클라이언트는 콜백 함수를 URL에 추가하여 다른 도메인의 서버에서 데이터를 요청합니다. 그런 다음 서버는이 기능에서 요청 된 데이터를 랩핑하여 클라이언트로 다시 보냅니다. 클라이언트는이 기능을 실행하여 데이터에 액세스합니다. 이 방법을 통해 JSONP는 상 동성 정책에 의해 부과 된 교차 도메인 제한을 극복 할 수 있습니다.
JSONP는 안전합니까?
JSONP는 상 동체 정책을위한 솔루션을 제공하지만 자체 보안 위험이 있습니다. JSONP에는 서버에서 수신 된 스크립트를 실행하는 것이 포함되기 때문에 서버가 손상된 경우 XSS (Cross-Site Scripting) 공격의 가능성을 열어줍니다. 따라서 신뢰할 수있는 출처에서만 JSONP를 사용하십시오.
JSONP는 오류 응답을 처리 할 수 있습니까?
jQuery를 사용하여 JSONP 요청을하는 방법은 무엇입니까?
JSONP는 지금 아직도 사용됩니까?
JSONP는 과거에 도메인 크로스 도메인 요청에 대한 인기있는 솔루션이지만 CORS는 이제 CORS (크로스 오리핀 자원 공유)의 출현으로 인해 사용 빈도가 낮으며, 더 안전하고 강력한 크로스 도메인을 제공합니다. 요청.
위 내용은 jquery ' s jsonp는 예제를 설명했습니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!