下面我們來看下跨域訪問的原理和實(shí)現(xiàn)方式


一,跨域原理分析：應(yīng)用同源策略輕松實(shí)現(xiàn)跨域


1.所謂同源是指，域名，協(xié)議，端口相同。當(dāng)瀏覽器運(yùn)行一個(gè)JS腳本時(shí)會(huì)進(jìn)行同源檢測，如果不同源是不能執(zhí)行的。
2.源繼承來自about:blank，javascript:和data:URLs中的內(nèi)容，繼承了將其載入的文檔所指定的源，因?yàn)樗鼈兊腢RL本身未指定任何關(guān)于自身源的信息。


3.變更源變更源可以實(shí)現(xiàn)基礎(chǔ)域相同的不同頁面的跨域問題。
如：a.baidu.com/index.html 通過 iframe 引入 b.baidu.com/index.html ，但是a中的JS是不可以操作b中的內(nèi)容的，但是可以通過修改源來實(shí)現(xiàn)。

需要在a和b中都修改domain,即 document.domain = 'baicu.com' 
注意：document.doamin的修改必須是當(dāng)前域或者當(dāng)前域的基礎(chǔ)域

如在a中document.domain = 'b.baidu.com'是報(bào)錯(cuò)的

二,跨域方案介紹

下面介紹了7種解決方案：

　?。?）document.domain iframe

　?。?）動(dòng)態(tài)創(chuàng)建script

　?。?）window.name iframe

　?。?）window.postMessage

　?。?）CORS

　?。?）JSONP

　　（7）nginx代理

下面我們來看下具體的用法吧?。?！


1,document.domain iframe

這種方式就是上面說的變更源,

在a.name.com/a.html中 

document.domain = 'a.com';
 
var ifr = document.createElement('iframe');
ifr.src = 'http://b.name.com/b.html';
ifr.display = none;
document.body.appendChild(ifr);
 
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    //在這里操作doc，也就是b.html
    ifr.onload = null;
};


在b.name.com/b.html中 



document.domain = 'name.com';




2,動(dòng)態(tài)創(chuàng)建script

因?yàn)閟cript標(biāo)簽不受同源策略的限制 



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, script[0]);
}
window.baidu = {
  sug: function(data){
    console.log(data);
  }
}
loadScript('https://www.baidu.com',function(){console.log('loaded')});



3,window.name iframe

window對(duì)象有個(gè)name屬性，該屬性有個(gè)特征：

即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的，

每個(gè)頁面對(duì)window.name都有讀寫的權(quán)限，

window.name是持久存在一個(gè)窗口載入過的所有頁面中的，并不會(huì)因新頁面的載入而進(jìn)行重置


a.com/a.html 



<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            function getData(){
                //此時(shí)window.name已被修改為b.com/b.html頁面設(shè)置的數(shù)據(jù)
                var iframe = document.getElementById('proxy');
                iframe.onload = function(){
                    var data = iframe.contentWindow.name;//獲取iframe中window.name,也就是b.com/b.html頁面設(shè)置的數(shù)據(jù)
                    alert(data);
                }
                iframe.src = 'about:block'; //賒著src的目的是為了讓iframe與當(dāng)前頁面同源。src被修改后會(huì)重新load然后觸發(fā)上面的onload
            }
        </script>
    </head>
    <body>
        <iframe id="proxy" src="b.com/b.html" onload="getData()"></iframe>
    </body>
</html>
4,postMessage（HTML5中的XMLHttpRequest Level 2中的API）



window.postMessage(message,targetOrigin)  方法是html5新引進(jìn)的特性，可以使用它來向其它的window對(duì)象發(fā)送消息，無論這個(gè)window對(duì)象是屬于同源或不同源，目前IE8 、FireFox、Chrome、Opera等瀏覽器都已經(jīng)支持window.postMessage方法。

　　調(diào)用postMessage方法的window對(duì)象是指要接收消息的那一個(gè)window對(duì)象，該方法的第一個(gè)參數(shù)message為要發(fā)送的消息，類型只能為字符串；第二個(gè)參數(shù)targetOrigin用來限定接收消息的那個(gè)window對(duì)象所在的域，如果不想限定域，可以使用通配符 *  。

　　需要接收消息的window對(duì)象，可是通過監(jiān)聽自身的message事件來獲取傳過來的消息，消息內(nèi)容儲(chǔ)存在該事件對(duì)象的data屬性中。

　　上面所說的向其他window對(duì)象發(fā)送消息，其實(shí)就是指一個(gè)頁面有幾個(gè)框架的那種情況，因?yàn)槊恳粋€(gè)框架都有一個(gè)window對(duì)象。在討論第二種方法的時(shí)候，我們說過，不同域的框架間是可以獲取到對(duì)方的window對(duì)象的，而且也可以使用window.postMessage這個(gè)方法。下面看一個(gè)簡單的示例，有兩個(gè)頁面

　　a.com/index.html 


<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script>
            var iframe = document.getElementById('iframe');
            iframe.contentWindow.postMessage('我是a.com/index.hmtl的消息', '*');
        </script>
    </head>
    <body>
        <iframe id="iframe" src="b.com/index.html"></iframe>
    </body>
</html>
b.com/index.html 




<script>
    window.onmessage = function(e){
        e = e || event;
        alert(e.data)
    }
</script>


5,CORS（Cross-Origin Resource Sharing）

跨源資源共享(CORS)是通過客戶端 服務(wù)端協(xié)作聲明的方式來確保請(qǐng)求安全的。服務(wù)端會(huì)在HTTP請(qǐng)求頭中增加一系列HTTP請(qǐng)求參數(shù)(例如Access-Control-Allow-Origin等)，來限制哪些域的請(qǐng)求和哪些請(qǐng)求類型可以接受，而客戶端在發(fā)起請(qǐng)求時(shí)必須聲明自己的源(Orgin)，否則服務(wù)器將不予處理，如果客戶端不作聲明，請(qǐng)求甚至?xí)粸g覽器直接攔截都到不了服務(wù)端。

前端代碼： 


function getHello() {
    var xhr = new XMLHttpRequest();
    xhr.open("post", "https://b.example.com/Test.ashx", true);
    xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");　　　
     
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4 && xhr.status == 200) {
            var responseText = xhr.responseText;
            console.info(responseText);
        }
    }
    xhr.send();
}
服務(wù)端：（https://b.example.com/Test.ashx） 



header('Access-Control-Allow-Origin:*')
也可以指定具體的來源的





6,JSONP -第一個(gè)來看下JSONP的跨域原理代碼展示

相信大家對(duì)Jsonp都不陌生吧  

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);


7,Nginx反向代理

前端調(diào)用的服務(wù) /apis/xxxx/xxxx  和當(dāng)前頁是同源的，nginx來做一個(gè)代理到想要的地方，來實(shí)現(xiàn)跨域

nginx.conf 配置一個(gè)反向代理路徑 


location /apis {
    rewrite ^. apis/?(.*)$ /$1 break;
    include uwsgi_params;
    proxy_pass http://www.baicu.com/xxxx
}


原文鏈接：JQuery前端跨域問題的七種解決方案