jQuery와 JSONP를 사용하여 도메인 간 액세스 문제를 쉽게 해결하세요_jquery

시간이 너무 빨리 흘러 js 전장으로 돌아가면 크로스 도메인 문제의 상처가 다시 ​​아프기 시작합니다

다행히도 jquery의 도움으로 크로스 도메인 문제는 그리 어렵지 않은 것 같습니다. 이번에도 크로스 도메인 문제의 근본 원인을 파악해 보았습니다. 관련 정보를 확인하고 크로스도메인 문제를 드디어 해결했습니다..메모를 적어야합니다.

크로스 도메인 보안 제한은 모두 브라우저 측을 의미합니다. 서버 측에는 크로스 도메인 보안 제한이 없으므로 "크로스 도메인 액세스" 작업은 httpclient와 유사한 방법을 통해 로컬 서버 측을 통해 완료됩니다. , 그런 다음 브라우저 측에서 AJAX를 사용하여 로컬 서버 측에서 "도메인 간 액세스"에 해당하는 URL을 획득하여 간접적으로 도메인 간 액세스를 완료하는 것도 가능합니다. 개발 규모는 상대적으로 크지만 제한 사항도 미미합니다. 많은 위젯 오픈 플랫폼 서버(예: Sohu 블로그 오픈 플랫폼)는 실제로 이 논의 범위에 속하지 않습니다.

우리가 논의하고 싶은 것은 브라우저 측의 진정한 도메인 간 액세스입니다. 현재 jQuery $.ajax()는 실제로 jsonp를 사용하여 수행되는 get 메서드에서 도메인 간 액세스를 지원하는 것이 좋습니다.

실제 사례:

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

var qsData = {'searchWord':$("#searchWord").attr("value"),'currentUserId':$("#currentUserId").attr("value"),'conditionBean.pageSize' :$( "#pageSize").attr("value")};
$.ajax({

async:false,
url: http://cross-domain dns/document!searchJSONResult.action,
type: "GET",
dataType: ' jsonp',
jsonp: 'jsoncallback',
data: qsData,
timeout: 5000,
beforeSend: function(){
//jsonp 메서드 이 메서드가 트리거되지 않습니다. dataType이 jsonp로 지정되면 더 이상 ajax 이벤트가 아닙니다.
},
성공: 함수(json) {//클라이언트 측 jquery에서 미리 정의한 콜백 함수가 크로스에서 json 데이터를 성공적으로 가져옵니다. -domain server 이후에 이 콜백 함수는 동적으로 실행됩니다.
if(json.actionErrors.length!=0){
Alert(json.actionErrors);
}
genDynamicContent(qsData,type, json);
},
완료: function(XMLHttpRequest, textStatus){
$.unblockUI({ fadeOut: 10 })
},
오류: function(xhr){
// 이 메소드는 jsonp 모드에서 트리거되지 않습니다. 이유는 dataType이 jsonp로 지정되면 더 이상 ajax 이벤트가 아니기 때문일 수 있습니다.
//오류 처리 요청
Alert("오류를 요청하세요. 상관 네트워크 상태를 확인하세요.)" ; 코드를 복사하세요


코드는 다음과 같습니다:

$.getJSON(" http://cross-domain dns/ document!searchJSONResult.action?name1=" value1 "&jsoncallback= ?", function(json){ if(json.property name==value){
// 코드 실행 } });

이 방법은 실제로 위 예에서 $.ajax({..}) API의 고급 캡슐화입니다.
이러한 방식으로 $.ajax API의 기본 매개변수 중 일부가 캡슐화됩니다. jquery는 다음 URL 가져오기 요청을 어셈블합니다
http://cross-domain dns/document!searchJSONResult.action?&jsoncallback=jsonp1236827957501&_=1236828192549&searchWord=use case¤tUserId=5351&conditionBean.pageSize=15

응답 측(http://cross-domain dns/document!searchJSONResult.action)에서
jsoncallback = request.getParameter("jsoncallback)을 통해 나중에 jquery 측에서 다시 호출할 js 함수 이름을 가져옵니다. ")
응답 내용은 스크립트 태그입니다. "jsonp1236827957501("요청 매개변수에 따라 생성된 json 배열")";
jquery는 콜백 메서드를 통해 이 js 태그를 동적으로 로드하고 호출합니다. jsonp1236827957501 (json 배열);
이것은 도메인 간 데이터 교환의 목적을 달성합니다.

jsonp의 가장 기본적인 원칙은 <script> 태그를 동적으로 추가하고 스크립트 태그의 src 속성에는 도메인 간 제한이 없다는 것입니다. 이런 식으로 이 크로스 도메인 메서드는 ajax XmlHttpRequest 프로토콜과 아무런 관련이 없습니다. <br> 이 방법으로 "jQuery AJAX 크로스 도메인 문제"는 잘못된 제안이 되었으며 jquery $.ajax 메서드 이름은 다음과 같습니다. </p> <p>dataType: 'jsonp'로 설정된 경우 이 $.ajax 메서드는 ajax XmlHttpRequest와 아무 관련이 없으며 JSONP 프로토콜로 대체됩니다.</p> <p>JSONP는 스크립트 태그를 서버 측에 통합하여 클라이언트에 반환할 수 있도록 하는 비공식 프로토콜이며, JavaScript 콜백을 통해 JSONP, 즉 JSON with Padding에 대한 도메인 간 액세스가 가능합니다. 동일 출처 정책의 제한으로 인해 XmlHttpRequest는 현재 소스(도메인 이름, 프로토콜, 포트)에서만 리소스를 요청할 수 있습니다. 도메인 간 요청을 하려면 html의 스크립트 태그를 사용하여 도메인 간 요청을 하고 응답에서 실행할 스크립트 코드를 반환하면 JSON을 사용하여 javascript 개체를 직접 전달할 수 있습니다. 이 도메인 간 통신 방법을 JSONP라고 합니다. </p> <p>jsonCallback 함수 jsonp1236827957501(....): 브라우저 클라이언트에 의해 등록됩니다. 크로스 도메인 서버에서 json 데이터를 얻은 후 콜백 함수 </p> <p><strong><font style="BACKGROUND-COLOR: #ccffcc">Jsonp 원칙: </font></strong></p> <p>먼저 클라이언트에 콜백(예: 'jsoncallback')을 등록한 다음 콜백 이름(예: jsonp1236827957501)을 서버에 전달합니다. 참고: 서버는 콜백 값을 얻은 후 jsonp1236827957501(...)을 사용하여 출력할 json 콘텐츠를 포함해야 합니다. 이때 서버에서 생성된 json 데이터를 클라이언트가 올바르게 수신할 수 있습니다. </p> <p>그런 다음 자바스크립트 구문을 사용하여 함수를 생성합니다. 함수 이름은 전달된 매개변수 'jsoncallback' jsonp1236827957501의 값입니다.</p> <p>마지막으로 json 데이터가 함수에 매개변수로 직접 배치되어 js 구문 문서가 생성되어 클라이언트에 반환됩니다. </p> <p>클라이언트 브라우저는 스크립트 태그를 파싱하고 반환된 자바스크립트 문서를 실행합니다. 이때 자바스크립트 문서 데이터는 클라이언트가 미리 정의한 콜백 함수(예: jquery $.ajax)에 매개변수 <br>로 전달됩니다. 위의 예) () 메소드 캡슐화 성공: 함수(json)) (콜백 함수의 동적 실행) </p> <p>jsonp 방식은 <script src="http://cross-domain/...xx.js"></script>와 원칙적으로 일치한다고 할 수 있습니다(qq space에서는 이 방식을 사용합니다). 도메인 간 데이터 교환을 달성하기 위해) JSONP는 스크립트 삽입(스크립트 삽입) 동작이므로 특정 보안 위험도 있습니다.

원칙 샘플 코드:

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

//클라이언트 JAVASCRIPT 코드
var script=document.createElement("script")
script.src="http://www.pl4cj.com:8888/5/6/action .php ?param=123&callback=" fnName;
document.getElementsByTagName("head")[0].appendChild(script)

//서버 측 PHP 코드에는 콜백을 위한 콜백이 있어야 합니다. , 여기에 괄호를 추가하면 명령문 블록
echo $_GET["callback"]."(" .json_encode($_GET).");";
?

jquey는 도메인 간 게시물을 지원하지 않습니다.

이유는 무엇입니까?
게시물을 사용하여 iframe을 동적으로 생성하면 교차 도메인 게시의 목적을 달성할 수 있지만 그렇게 하는 것은 상대적으로 극단적인 방법이므로 권장되지 않습니다.
또한 라고 합니다. get의 크로스 도메인 방식은 합법적이지만 post 방식은 보안 측면에서 불법으로 간주되므로 최후의 수단으로 잘못된 접근 방식을 취하지 않는 것이 가장 좋습니다..

클라이언트 측의 도메인 간 액세스에 대한 요구가 w3c의 관심을 끌었던 것 같습니다. 정보에 따르면 HTML5 WebSocket 표준은 도메인 간 데이터 교환을 지원하며 선택적인 도메인 간 데이터 교환 솔루션이기도 합니다. 앞으로도