크로스 도메인이란 무엇입니까?
개념 : 프로토콜, 도메인 이름 또는 포트에 차이가있는 한 다른 도메인으로 간주됩니다.
코드 사본은 다음과 같습니다.
URL은 통신이 허용되는지 여부를 나타냅니다
http://www.a.com/a.js
http://www.a.com/b.js는 동일한 도메인 이름으로 허용됩니다
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 동일한 도메인 이름의 다른 폴더가 허용됩니다.
http://www.a.com:8000/a.js
http://www.a.com/b.js 동일한 도메인 이름, 다른 포트는 허용되지 않습니다.
http://www.a.com/a.js
https://www.a.com/b.js 동일한 도메인 이름, 다른 프로토콜은 허용하지 않습니다.
http://www.a.com/a.js
http://70.32.92.74/b.js 도메인 이름 및 도메인 이름은 IP에 해당합니다.
http://www.a.com/a.js
http://script.a.com/b.js 기본 도메인은 동일하지만 하위 도메인은 허용되지 않습니다.
http://www.a.com/a.js
http://a.com/b.js 동일한 도메인 이름, 다른 보조 도메인 이름 (위와 동일)이 허용되지 않습니다 (이 경우 쿠키에 액세스 할 수 없습니다)
http://www.cnblogs.com/a.js
http://www.a.com/b.js 다른 도메인 이름은 허용되지 않습니다
포트와 프로토콜의 차이는 배경을 통해서만 해결할 수 있습니다.
크로스 도메인 자원 공유 (CORS)
CRO (Cross-Origin Resource Sharing) 크로스 도메인 리소스 공유는 크로스 도메인 리소스에 액세스 할 때 브라우저와 서버가 통신하는 방법을 정의합니다. CRO의 기본 아이디어는 사용자 정의 HTTP 헤더를 사용하여 브라우저가 서버와 통신 할 수 있도록 요청 또는 응답이 성공적인지 실패 해야하는지 결정하는 것입니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var xhr = 새로운 xmlhttprequest ();
xhr.open ( " get", "/trigkit4", true);
xhr.send ();
</스크립트>
위의 Trigkit4는 상대 경로입니다. CORS를 사용하려면 관련 Ajax 코드가 다음과 같습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
var xhr = 새로운 xmlhttprequest ();
xhr.open ( " get", "http://segmentfault.com/u/trigkit4/",true);
xhr.send ();
</스크립트>
코드와 이전 코드의 차이점은 상대 경로가 다른 도메인의 절대 경로, 즉 도메인에서 액세스하려는 인터페이스 주소로 대체된다는 것입니다.
CORS에 대한 서버 측 지원은 주로 액세스-제어 홀로-오리핀을 설정함으로써 달성됩니다. 브라우저가 해당 설정을 감지하면 AJAX가 도메인에 걸쳐 액세스 할 수 있습니다.
크로스 도메인 문제를 해결하기 위해 다음 방법을 사용할 수 있습니다.
JSONP를 통한 크로스 도메인
이제 질문은? JSONP는 무엇입니까? Wikipedia의 정의는 다음과 같습니다. JSONP (Padding with Padding)는 데이터 형식 JSON의 "사용 모드"이며 웹 페이지가 다른 도메인에서 정보를 요청할 수 있습니다.
JSONP는 채우기 JSON이라고도합니다. JSON을 적용하는 새로운 방법이지만 기능 통화에 포함 된 JSON입니다.
코드 사본은 다음과 같습니다.
콜백 ({ "name", "trigkit4"});
JSONP는 콜백 함수와 데이터의 두 부분으로 구성됩니다. 콜백 함수는 응답이 도착하면 페이지에서 호출되어야하는 함수이며 데이터는 콜백 함수로 전달 된 JSON 데이터입니다.
JS에서는 xmlhttprequest를 사용하여 다른 도메인에 대한 데이터를 직접 요청할 수 없습니다. 그러나 페이지의 다른 도메인에 JS 스크립트 파일을 소개해도 괜찮으며 JSONP는이 기능을 사용하여이를 달성합니다. 예를 들어:
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
함수 dosomething (jsondata) {
// 획득 한 JSON 데이터를 처리합니다
}
</스크립트>
<script src = "http://example.com/data.php?callback=dosomething"> </script>
JS 파일이 성공적으로로드되면 URL 매개 변수에 지정된 기능이 실행되며 필요한 JSON 데이터는 매개 변수로 전달됩니다. 따라서 JSONP는 서버 측 페이지가 그에 따라 협력해야합니다.
코드 사본은 다음과 같습니다.
<? php
$ 콜백 = $ _get [ '콜백']; // 콜백 함수 이름을 얻습니다
$ data = array ( 'a', 'b', 'c'); // 반환 할 데이터
echo $ 콜백. '('. json_encode ($ data). ')'; // output
?>
마지막으로, 출력은 다음과 같습니다.
페이지에서 jQuery를 사용하는 경우 캡슐화 방법을 사용하여 JSONP 작업을 매우 편리하게 수행 할 수 있습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
$ .getJson ( 'http://example.com/data.php?callback=?, function (jsondata)') {
// 획득 한 JSON 데이터를 처리합니다
});
</스크립트>
jQuery는 콜백 =?에서 물음표를 대체하기 위해 전역 기능을 자동으로 생성 한 다음 데이터를 얻은 후 자동으로 데이터를 파괴합니다. 실제로 임시 에이전트 기능의 역할을 수행합니다. $ .getJson 방법은 교차 도메인인지 자동으로 결정합니다. 그것이 교차 도메인이 아닌 경우, 일반적인 Ajax 방법을 호출합니다. 크로스 도메인 인 경우 JSONP 콜백 함수를 JS 파일의 비동기로드 형태로 호출합니다.
JSONP의 장단점
JSONP의 장점은 다음과 같습니다. XMLHTTPREQUEST 객체가 구현 한 AJAX 요청과 같은 상동 정책에 의해 제한되지 않습니다. XMLHTTPREQUEST 또는 ActiveX의 지원없이 호환성이 우수하고 구형 브라우저에서 실행할 수 있습니다. 요청이 완료된 후 콜백 호출로 결과를 반환 할 수 있습니다.
JSONP의 단점은 게시물과 같은 다른 유형의 HTTP 요청이 아닌 GET 요청 만 지원한다는 것입니다. 크로스 도메인 HTTP 요청 만 지원하며 다른 도메인에서 두 페이지간에 JavaScript 호출을하는 방법에 대한 문제를 해결할 수 없습니다.
CROS와 JSONP의 비교
JSONP와 비교할 때 CORS는 의심 할 여지없이 더 진보되고 편리하며 신뢰할 수 있습니다.
1. JSONP는 GET 요청 만 구현할 수 있지만 CORS는 모든 유형의 HTTP 요청을 지원합니다.
2. CORS를 사용하여 개발자는 일반 XMLHTTPREQUEST를 사용하여 요청을 시작하고 데이터를 얻을 수 있으며, 이는 JSONP보다 오류 처리가 더 좋습니다.
3. JSONP는 주로 오래된 브라우저에서 지원됩니다. 그들은 종종 CORS를 지원하지 않으며 대부분의 현대식 브라우저는 이미 CORS를 지원합니다).
문서를 수정하여 교차 보관함
브라우저에는 상 동성 정책이 있으며, 그 제한 중 하나는 첫 번째 방법에서 다른 소스의 문서를 AJAX 방법을 통해 요청할 수 없다고 말했습니다. 두 번째 한계는 브라우저에서 다른 도메인의 프레임 워크간에 JS 상호 작용을 수행 할 수 없다는 것입니다.
다른 프레임 워크는 창 객체를 얻을 수 있지만 해당 속성과 방법을 얻을 수는 없습니다. 예를 들어 http://www.example.com/a.html의 주소가있는 페이지가 있습니다. 이 페이지에는 iframe이 있으며 SRC는 http://example.com/b.html입니다. 분명히이 페이지는 Iframe 프레임 워크와 다른 도메인을 가지고 있으므로 페이지에서 JS 코드를 작성하여 iframe에서 물건을 얻을 수 없습니다.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
기능 test () {
var iframe = document.getElementById ( 'ifame');
var win = document.contentWindow; // iframe에서 창 객체를 얻을 수 있지만 창 객체의 속성과 메소드는 거의 사용할 수 없습니다.
var doc = win.document; // iframe의 문서 개체는 여기에서 얻을 수 없습니다.
var name = win.name; // 창 객체의 이름 속성은 여기서 얻을 수 없습니다.
}
</스크립트>
<iframe id = "iframe"src = "http://example.com/b.html"onload = "test ()"> </iframe>
현재 Document.Domain은 유용 할 수 있습니다. 우리는 http://www.example.com/a.html 및 http://example.com/b.html 두 페이지의 Document.Domain을 동일한 도메인 이름으로 설정하면됩니다. 그러나 문서 설정은 제한되어 있습니다. 우리는 문서 만 설정할 수 있습니다. 도메인은 자체 또는 더 높은 상위 도메인으로 만 설정할 수 있으며 기본 도메인은 동일해야합니다.
1. 페이지에서 documain을 설정하십시오 http://www.example.com/a.html :
코드 사본은 다음과 같습니다.
<iframe id = "iframe"src = "http://example.com/b.html"onload = "test ()"> </iframe>
<script type = "text/javaScript">
document.domain = 'example.com'; // 메인 도메인으로 설정됩니다
기능 test () {
Alert (document.getElementById ( 'iframe'). contentwindow); // contentwindow는 어린이 창의 창 객체를 얻을 수 있습니다.
}
</스크립트>
2. 또한 http://example.com/b.html 페이지에 문서를 설정하십시오.
코드 사본은 다음과 같습니다.
<script type = "text/javaScript">
document.domain = 'example.com'; //이 페이지를 iframe에로드하고 document.docal.codain.docde.documain.docal.
</스크립트>
문서를 수정하는 방법은 다른 하위 도메인과의 프레임 워크 간의 상호 작용에만 적합합니다.