>  기사  >  웹 프론트엔드  >  AJAX 크로스 도메인 및 JSONP(기사에 짧은 주소를 자동으로 추가하는 기능)_jquery

AJAX 크로스 도메인 및 JSONP(기사에 짧은 주소를 자동으로 추가하는 기능)_jquery

WBOY
WBOY원래의
2016-05-16 18:36:261033검색

AJAX 크로스 도메인 요청이란
보안상의 이유로 www.a.com에서 Ajax를 통해 다른 웹사이트 www.b.com의 콘텐츠를 요청하려는 경우 브라우저에서 이를 허용하지 않습니다(하지 마세요) 여기서 보안이 무엇을 의미하는지 이해하지 못하시나요? 그러한 제한이 없다면 해커가 무엇을 할 수 있는지 생각해 보세요. 그렇다면 어떤 상황에서 크로스 도메인으로 간주됩니까? 도메인 이름이 다르면 확실히 교차 도메인으로 간주됩니다. 예를 들어 a.com이 b.com에 요청을 보내는 경우 이는 물론 교차 도메인으로 간주되어 허용되지 않습니다. 그러나 다른 하위 도메인(예: sub.a.com은 www.a.com에 요청을 보냅니다) 또는 동일한 도메인 이름이지만 다른 포트(예: a.com:80에서 a.com:8080으로)도 가능합니다. 크로스 도메인으로 간주됩니다.
다음은 교차 도메인 예를 보여줍니다.

코드 복사 코드는 다음과 같습니다.

< ;script type="text/javascript" >
//jQuery 코드
$("#btnCrossDomainRequest").click(function(){
$.get('http:/ /www.jb51 .net', function(data){
alert('success');
})
})
🎜> (IE8에서는 권한이 없다는 메시지가 나오며, FF3.5.5와 Google Chrome에서는 메시지가 없습니다. IE6에서는 팝업 메시지가 있어야 했던 것으로 기억합니다(제 기억이 맞다면))
교차 도메인 AJAX 요청에 대한 솔루션
AJAX 애플리케이션 환경에서 보안상의 이유로 브라우저는 XMLHttpRequest 구성 요소가 교차 도메인 리소스를 요청하는 것을 허용하지 않습니다. 많은 경우 이러한 제한으로 인해 많은 불편을 겪었습니다. 많은 동료들이 다양한 솔루션을 연구했습니다.
1. document.domain 및 숨겨진 IFrame을 수정하여 도메인 간 요청을 구현합니다. 이 솔루션은 도메인 간 요청에 대한 가장 간단한 솔루션일 수 있지만 가장 제한적인 솔루션이기도 합니다. 우선, 동일한 최상위 도메인 이름에서만 도메인 간 요청을 구현할 수 있습니다. 또한 페이지에 다른 IFrame도 포함되어 있으면 보안 예외가 발생할 수 있으며 액세스가 거부됩니다.
2. 서버 프록시는 현재 도메인의 프록시를 요청하여 다른 도메인의 리소스에 액세스합니다. XMLHttpRequest는 이 도메인의 서버 리소스를 요청하여 서버에 액세스할 수 있는 대상 리소스를 제공하고, 서버가 대상 리소스에 프록시로 액세스할 수 있도록 합니다. 이 솔루션은 완전한 도메인 간 액세스를 달성할 수 있지만 개발 및 요청 프로세스의 소비는 상대적으로 큽니다.
3. 이미지, 스크립트, LINK 태그 등 HTML에서 도메인 간 리소스 태그 참조를 요청하여 목적을 달성할 수 있습니다. 이 태그들 중에서 Script가 의심할 여지없이 가장 적합합니다. 각 스크립트 리소스를 요청하면 브라우저는 스크립트 파일에 정의된 기능이나 즉시 실행해야 하는 JavaScript 코드를 구문 분석하고 실행합니다. 브라우저를 통해 교차 도메인 요청의 목적을 달성합니다. 스크립트 태그를 사용하여 도메인 간 요청을 구현하고 get 메서드만 사용하여 서버 리소스를 요청할 수 있습니다.

첫 번째 해결 방법에서는 루트 도메인 이름이 동일해야 합니다(예: a.domain.com 및 b.domain.com). 전체 솔루션은 대략 다음과 같습니다.



두 번째 솔루션은 서버 측의 WebClient(또는 기타) 클래스를 통해 도메인 간 콘텐츠를 요청하는 것입니다. 여기에서 한 가지 주의할 점은 WebClient 요청에 쿠키 정보를 포함하려면 수동으로 WebClient에 쿠키 정보를 추가해야 한다는 것입니다. image세 번째 해결 방법은 아래에서 이야기해야 할 JSONP와 관련된 것입니다.

JSONP
JSONP의 전체 이름은 "JSON with padding"이어야 합니다. 도메인 간에 요청할 수 있는

테스트? 캔트? 확실히 그렇지 않습니다. 크로스 도메인이기 때문에 크로스 도메인 요청을 할 수 있는


하하. 아주 간단하지 않아? 이 구현을 사용하여 기사에 자동으로 URL을 단축하는 기능을 추가해 보겠습니다.



코드 복사
코드는 다음과 같습니다.