jQuery 교차 도메인 액세스 문제solution_jquery

시간이 너무 빨리 흐르고, 다시 js 전장으로 끌려갔을 때 크로스 도메인 문제의 상처가 다시 ​​아프기 시작했습니다.

다행히 jquery의 도움으로 크로스 도메인 문제는 그리 어렵지 않은 것 같았습니다. 이번에도 이 기회를 빌어 크로스 도메인 문제를 근본 원인으로 삼아 실제 개발 프로젝트와 결합하여 관련 정보를 확인하고 최종적으로 크로스 도메인 문제를 해결한 메모를 작성하게 되었습니다.

크로스 도메인 보안 제한은 브라우저 측을 의미합니다. 서버 측에는 크로스 도메인 보안 제한이 없습니다.
그래서 "크로스 도메인 액세스" 작업은 로컬 서버를 통해 완료됩니다. 그런 다음 브라우저 측에서 AJAX를 사용하여 이를 얻습니다. 머신 서버에서 "크로스 도메인 액세스"에 해당하는 URL을 사용하여 간접적으로 크로스 도메인 액세스를 완료하는 것도 가능합니다. , 개발 규모가 상대적으로 크다는 것은 분명하지만 제한 사항은 미미합니다. 많은 위젯 오픈 플랫폼 서버 측(예: Sohu 블로그 오픈 플랫폼)은 실제로 이 논의 범위에 속하지 않습니다. 우리가 논의하고 싶은 것은 브라우저 측의 실제 도메인 간 액세스입니다. 권장되는 것은 jQuery $.ajax()가 현재 실제로 jsonp를 사용하는 get 메소드에서 도메인 간 액세스를 지원한다는 것입니다.

실제 사례 :

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

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

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


참고: $.getJSON(" http://cross-domain dns/document!searchJSONResult.action?name1=" value1 "&jsoncallback=?",
function(json){
if(json. 속성 이름==값){
//실행 코드
}
})
이 메서드는 실제로 위 예에서 $.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 = 요청을 통해. getParameter(" jsoncallback") 나중에 jquery 측에서 다시 호출될 js 함수 이름을 가져옵니다. jsonp1236827957501
그런 다음 응답 내용은 스크립트 태그입니다. "jsonp1236827957501("요청 매개 변수에 따라 생성된 json 배열" )";
jquery는 콜백을 전달합니다. 메소드는 이 js 태그를 동적으로 로드하고 호출합니다:jsonp1236827957501(json 배열);
이것은 도메인 간 데이터 교환의 목적을 달성합니다.

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

jquey는 도메인 간 게시를 지원하지 않습니다.
이유는 무엇입니까?
post를 사용하여 iframe을 동적으로 생성하면 post의 목적을 달성할 수 있습니다. cross-domain (일부 js에서는 이것이 jquery 1.2.5를 패치하는 훌륭한 방법입니다.) 그러나 이는 상대적으로 극단적인 방법이므로 권장하지 않습니다.
get의 도메인 간 방법이 합법적이라고 할 수도 있습니다. 그리고 게시 방법은 보안 측면에서 안전하다고 간주됩니다. 최후의 수단으로 너무 멀리 가지 마세요.

클라이언트 측에서 도메인 간 액세스에 대한 요구가 주목을 받은 것 같습니다. 정보에 따르면 html5 WebSocket 표준은 도메인 간 데이터 교환을 위한 선택적 미래 솔루션을 지원합니다.