JavaScript 크로스 도메인 솔루션 요약(코드)

이 글은 크로스 도메인 솔루션에 대한 요약(코드)을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

동일 출처 정책: 프로토콜, 도메인 이름, 포트가 모두 동일합니다.

원본이 아닌 제한:

cookie, localStorage, indexDB를 읽을 수 없습니다.

DOM을 얻을 수 없습니다.

AJAX 요청을 보낼 수 없습니다.

해결책:

1. JSONP

원리: 요소를 동적으로 추가하여 서버에서 JSON 데이터를 요청합니다. 서버는 요청을 수신하고 이를 지정된 명명된 콜백 함수에 반환합니다.

eg:

function addScript(src) { var script = document.createElement('script'); script.setAttribute("type", "text/javscript"); script.src = src; document.body.appendChild(script); }

window.onload = function() { addScript("https://segmentfault.com/data?callback=getData"); }

function getData(data) { console.log(data) } 참고: 1. 쿼리 URL의 콜백은 콜백 함수의 이름을 지정해야 합니다. 2. 브라우저에서 를 코드로 실행하면 정의된 getData 함수가 즉시 호출됩니다. 3. 반환된 JSON 매개변수는 문자열이 아닌 JavaScript 개체로 사용되며 JSON 변환이 필요하지 않습니다. 4.jquery 라이브러리의 $.getJSON()도 구현할 수 있습니다.

$.getJSON("https://segmentfault.com/data?callback=?", function(data) { console.log(data) }) 결함: 는 GET을 통해 획득되며 POST를 지원하지 않습니다.

2.window.postMessage

window.postMessage는 소스가 동일하든 아니든 상관없이 창 간 통신을 허용합니다. postMessage의 첫 번째 매개변수는 콘텐츠를 전달하는 것이고, 두 번째 매개변수는 프로토콜 + 도메인 이름 + 포트 또는 (*는 도메인 이름이 제한되지 않음을 의미합니다)

页面一："https://www.segmentfault.com/page1.html" //传递页面 window.onload = function () { if (typeof window.postMessage === undefined) { alert("浏览器不支持postMessage！"); } else { window.open.postMessage({data: "Hello World"}, "https://www.example.com/page2.html"); } } 页面二："https://www.example.com/page2.html" //接收页面 window.addEventListener('message', function(e) { console.log(e.data); },false); window.addEventListener('message)를 수신하는 이벤트의 메시지 이벤트 객체입니다. ', function(){}); 이벤트에는 세 가지 속성이 있습니다. 1. event.source: 메시지 전송 창 2. event.origin: 메시지가 전송되는 URL 3. .data: 메시지 내용

//引用父窗口发送信息给下一个窗口 window.addEventListener('message', receiveMessage); function receiveMessage(event) { event.source.postMessage('Nice to see you!', '*'); } //过滤不是发给本窗口的信息 window.addEventListener('message', receiveMessage); function receiveMessage(event) { if (event.origin !== 'http://www.segmentfault.com/page1.html') return; if (event.data === 'Hello World') { event.source.postMessage('Hello', event.origin); } else { console.log(event.data); } } 3. iframe

iframe 로딩 페이지와 src의 대상 도메인은 동일한 도메인이며 ajax 요청(상위-하위 창)을 시작할 수 있습니다. // 전제는 소스가 동일한 소스에서 온다는 것입니다. Ajax 요청은 다른 소스에서 시작될 수 없습니다.

윈도우 객체는 소스가 동일한 서로 다른 윈도우 간에 얻을 수 있지만, 윈도우 객체의 속성과 메서드는 얻을 수 없습니다. //소스가 다를 경우 오류 발생

1.document.domain + iframe (동일 소스 가능 - 크로스 서브도메인)

document.domain 속성: 1차 도메인 이름은 같지만 2차 -level 도메인 이름이 다르기 때문에 창 개체를 얻을 수 있습니다.

页面一："https://segmentfault.com/page1.html" window.onload = function() { document.domain = "https://segmentfault.com/"; //设置domain window.getData = function() { //ajax请求 } } rrree 결함: 기본 도메인 이름은 일관성이 있어야 합니다 .

2.window.name + iframe(원본이 아닌 소스에 사용 가능) window.name 속성: 윈도우의 수명 주기 동안, 동일한 소스에서 온 것인지 여부에 관계없이 창. 동일한 창의 로딩 페이지 이름 속성은 공유되어 모든 페이지를 조작할 수 있습니다.

页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //document.domain设置成自身或更高一级的父域，主域必须相同。 document.domain = "https://segmentfault.com/" //设置domain function test() { var win = document.getElementById("iframe").contentWindow; win.getData("https://segmentfault.com/json_domain.php", function() {}) } 页面一："https://segmentfault.com/page1.html" window.name = "this is data!" 결함: 낮은 호환성

3. location.hash + iframe(원본이 아닌 소스에서 사용 가능) 조각 식별자: 조각 식별자는 URL# 번호 뒤의 부분을 나타냅니다. 조각 식별자 페이지를 변경하는 것만으로는 새로 고쳐지지 않습니다.

页面二："https://segmentfault.com/page2.html" //动态创建iframe最佳，获取完数据销毁。 //获取window.name function test() { var winName = document.getElementById("iframe").contentWindow.name; winName.src = "https://segmentfault.com/data.html"; //最后需要将iframe的src设置成当前域的一个页面地址 } 页面一："https://www.segmentfault.com/page1.html" function startRequest(){ var ifr = document.createElement('iframe'); ifr.style.display = 'none'; ifr.src = 'https://www.example.com/page2.html#messgae'; document.body.appendChild(ifr); } function checkHash() { var data = location.hash ? location.hash.substring(1) : ''; } setInterval(checkHash, 2000); 页面二："https://www.example.com/page2.html#messgae" function callBack(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome的安全机制无法修改parent.location.hash， // 所以要利用一个中间的example域下的代理iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'https:/www.segmentfault.com/page3html#somedata'; // 注意该文件在"segmentfault.com"域下 document.body.appendChild(ifrproxy); } } 단점: URL에 데이터가 노출되고, 길이도 제한됩니다.

4. WebSocket

WebSocket: 브라우저는 JavaScript를 통해 WebSocket 연결을 설정하라는 요청을 서버에 보냅니다. 연결이 설정된 후 클라이언트와 서버는 TCP 연결을 통해 직접 데이터를 교환할 수 있습니다.

WebSocket 요청 헤더 정보를 설정하면 서버가 이를 지원합니다.

页面三："ttps:/www.segmentfault.com/page3html#somedata" //因为parent.parent和自身属于同一个域，所以可以改变其location.hash的值 parent.parent.location.hash = self.location.hash.substring(1); 단점: 높은 구현 비용.

5. CORS

cors는 도메인 간 리소스 공유입니다. 현재 CORS 통신의 핵심은 서버입니다. 서버가 CORS 인터페이스를 구현하면 Cross-Origin 통신이 가능합니다.

단점: 서버 구성, 기본 도메인 대역폭을 점유합니다.

이 기사는 여기까지입니다. 더 흥미로운 내용을 보려면 PHP 중국어 웹사이트의 JavaScript Video Tutorial 칼럼을 주목하세요!