Eight solutions to cross domain problems (the latest and most comprehensive)

from PheonixHkbxoic Of 《 Front end solution to cross domain problems 8 Kind of plan （ The latest and most complete ）》

Original address ：https://www.cnblogs.com/PheonixHkbxoic/p/5760838.html

1. The same-origin policy as follows ：

Pay special attention to two points ：

First of all , If the protocol and port cause cross domain problems “ The front desk ” There's nothing we can do ,

second ： On cross-domain issues , Domain is only through “URL The first ” To identify and not try to judge the same ip The address corresponds to two domains or whether two domains are in the same ip On .

“URL The first ” finger window.location.protocol +window.location.host, It can also be understood as “Domains, protocols and ports must match”.

2. The front end solves cross domain problems

1> document.domain + iframe ( This method can only be used when the primary domain is the same )

1. stay www.a.com/a.html in ：

document.domain = 'a.com';var ifr = document.createElement('iframe');ifr.src = 'http://www.script.a.com/b.html';ifr.display = none;document.body.appendChild(ifr);ifr.onload = function(){
        var doc = ifr.contentDocument || ifr.contentWindow.document;    // Operate here doc, That is to say b.html ifr.onload = null;};

2. stay www.script.a.com/b.html in ：

document.domain = 'a.com';

2> Dynamically create script

There's nothing to say about this , because script Tags are not restricted by the same origin strategy .

function loadScript(url, func) {
      var head = document.head || document.getElementByTagName('head')[0];  var script = document.createElement('script');  script.src = url;   script.onload = script.onreadystatechange = function(){
        if(!this.readyState || this.readyState=='loaded' || this.readyState=='complete'){
          func();      script.onload = script.onreadystatechange = null;    }  };   head.insertBefore(script, 0);}window.baidu = {
      sug: function(data){
        console.log(data);  }}loadScript('http://suggestion.baidu.com/su?wd=w',function(){
    console.log('loaded')});// Where is the content of our request ？// We can do it in chorme Debug panel's source see script Content introduced 

3> location.hash + iframe

The principle is to use location.hash To transmit values .

Suppose the domain name a.com The files under the cs1.html Want to be with cnblogs.com Domain name cs2.html Transmit information .

1. cs1.html First, automatically create a hidden iframe,iframe Of src Point to cnblogs.com Domain name cs2.html page
2. cs2.html After responding to the request, it will be modified cs1.html Of hash Value to pass the data
3. At the same time cs1.html Add a timer , Judge at intervals location.hash Is there any change in the value of , Once there is a change, get hash value
   notes ： Because the two pages are not in the same domain IE、Chrome No modification allowed parent.location.hash Value , So with the help of a.com A proxy under the domain name iframe

The code is as follows ：
First, a.com The files under the cs1.html file ：

function startRequest(){
        var ifr = document.createElement('iframe');    ifr.style.display = 'none';    ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';    document.body.appendChild(ifr);} function checkHash() {
        try {
            var data = location.hash ? location.hash.substring(1) : '';        if (console.log) {
                console.log('Now the data is '+data);        }    } catch(e) {
    };}setInterval(checkHash, 2000);

cnblogs.com Domain name cs2.html:

// Simulate a simple parameter processing operation switch(location.hash){ case '#paramdo': callBack(); break; case '#paramset': //do something…… break;} function callBack(){ try { parent.location.hash = 'somedata'; } catch (e) { // ie、chrome The security mechanism of cannot be modified parent.location.hash, //  So take advantage of a middle cnblogs Agent under domain iframe var ifrproxy = document.createElement('iframe'); ifrproxy.style.display = 'none'; ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata'; //  Note that the file is in "a.com" Under domain  document.body.appendChild(ifrproxy); }}

a.com Domain name under cs3.html

// because parent.parent Belongs to the same domain as itself , So you can change it location.hash Value parent.parent.location.hash = self.location.hash.substring(1);

4> window.name + iframe

window.name The beauty of ：name Values on different pages （ Even different domains ） It still exists after loading , And can support very long name value （2MB）.

1. establish a.com/cs1.html

2. establish a.com/proxy.html, And add the following code

<head>  <script> function proxy(url, func){
       var isFirst = true, ifr = document.createElement('iframe'), loadFunc = function(){
       if(isFirst){
       ifr.contentWindow.location = 'http://a.com/cs1.html'; isFirst = false; }else{
       func(ifr.contentWindow.name); ifr.contentWindow.close(); document.body.removeChild(ifr); ifr.src = ''; ifr = null; } }; ifr.src = url; ifr.style.display = 'none'; if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc); else ifr.onload = loadFunc; document.body.appendChild(iframe); }</script></head><body>  <script> proxy('http://www.baidu.com/', function(data){
       console.log(data); }); </script></body>

3 stay b.com/cs1.html Contained in the ：

<script> window.name = ' What to send ';</script>

5> postMessage（HTML5 Medium XMLHttpRequest Level 2 Medium API）

1. a.com/index.html The code in ：

<iframe id="ifr" src="b.com/index.html"></iframe><script type="text/javascript">window.onload = function() {
       var ifr = document.getElementById('ifr'); var targetOrigin = 'http://b.com'; //  If written as 'http://b.com/c/proxy.html' The effect is the same  //  If written as 'http://c.com' They don't execute postMessage 了  ifr.contentWindow.postMessage('I was there!', targetOrigin);};</script>

2. b.com/index.html The code in ：

<script type="text/javascript"> window.addEventListener('message', function(event){
       //  adopt origin Property to determine the message source address  if (event.origin == 'http://a.com') { alert(event.data); //  eject "I was there!" alert(event.source); //  Yes a.com、index.html in window References to objects  //  But due to the homology strategy , here event.source No access window object  } }, false);</script>

6> CORS

CORS The idea behind it , It's using custom HTTP The head lets the browser communicate with the server , To determine whether the request or response should succeed , Or should we fail .

IE Chinese vs CORS The implementation of xdr

var xdr = new XDomainRequest();xdr.onload = function(){
        console.log(xdr.responseText);}xdr.open('get', 'http://www.baidu.com');......xdr.send(null);

The implementation in other browsers is xhr in

var xhr =  new XMLHttpRequest();xhr.onreadystatechange = function () {
        if(xhr.readyState == 4){
            if(xhr.status >= 200 && xhr.status < 304 || xhr.status == 304){
                console.log(xhr.responseText);        }    }}xhr.open('get', 'http://www.baidu.com');......xhr.send(null);

Implement cross browser CORS

function createCORS(method, url){
        var xhr = new XMLHttpRequest();    if('withCredentials' in xhr){
            xhr.open(method, url, true);    }else if(typeof XDomainRequest != 'undefined'){
            var xhr = new XDomainRequest();        xhr.open(method, url);    }else{
            xhr = null;    }    return xhr;}var request = createCORS('get', 'http://www.baidu.com');if(request){
        request.onload = function(){
            ......    };    request.send();}

7> JSONP

JSONP It has two parts ： Callback functions and data .

The callback function is to place the response on the current page when it arrives Called Function of .

The data is passed into the callback function json data , That is, the parameters of the callback function .

function handleResponse(response){
        console.log('The responsed data is: '+response.data);}var script = document.createElement('script');script.src = 'http://www.baidu.com/json/?callback=handleResponse';document.body.insertBefore(script, document.body.firstChild);/*handleResonse({"data": "zhe"})*/// The principle is as follows ：// When we go through script Tag request // The background will be based on the corresponding parameters (json,handleResponse)// To generate the corresponding json data (handleResponse({"data": "zhe"}))// The last one returned json data ( Code ) Will be put in the current js Executed in the file // So far, the cross domain communication is completed 

jsonp Although it's very simple , But it has the following disadvantages ：

1） safety problem ( There may be security risks in the request code )

2） To be sure jsonp Whether the request fails is not easy

8> web sockets

web sockets It's a browser API, Its goal is to provide full duplex on a single persistent connection 、 Two-way communication .( Homology strategy is very important to web sockets Do not apply )

web sockets principle ： stay JS Created web socket after , There will be one. HTTP Request sent to browser to initiate connection . After getting the server response , The established connection will use HTTP Upgrade from HTTP The agreement is exchanged for web sockt agreement .

Only in support of web socket The protocol can work normally on the server .

var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wsssocket.send('hello WebSockt');socket.onmessage = function(event){ var data = event.data;}