ajax跨域的解決方案

會飛的Tiger發表於2016-12-23
跨域

前言

公司要做一個活動頁面，在其過程中發現所有的介面，ajax請求跨域。這裡對跨域做個簡單介紹以及提供幾種解決辦法。

由於瀏覽器實現的同源策略的限制，XmlHttpRequest只允許請求當前源（域名、協議、埠）的資源，所以AJAX是不允許跨域的。這裡提供自己常用的三種方法：

jsonp訪問

　　JSONP(JSON with Padding)是一個非官方的協議，它允許在伺服器端整合Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問；

實現方式

　　1）

<script type="text/javascript">  
    $.ajax({  
        url:url,  
        dataType:'jsonp',  
        data:'',  
        jsonp:'callback',  
        success:function(result) {  
    
        },  
    });  
</script>

　　2）

 $.getJSON(url+"?callback=?",  
    function(result) {  
     
    });

注：

　　 jsonp只能用get請求，哪怕你用了post請求，也會自動給你轉換成get;

　　 jsonp 不僅可以用來獲取資料，也可以用來提交資料。

damain 方法

在主域相同，子域不同的情況下可以用這種方法，修改域名指向，讓他們指向同一域名，這種辦法也只能解決主域相同而二級域名不同的情況，兩個毫無關係的網址是不可以用這種方法的；

document.domain = 'a.com'

注：在實際開發中，很多人會在本地除錯介面，localhost的域名和公司的域名完全不一樣，所有用了domain這種辦法也無法產生效果，解決辦法是修改c盤裡的host檔案，把本地地址localhost修改成公司域名或者公司二級域名，然後這種方法就可以使用了。

下面是修改的域名指向：

#127.0.0.1  localhost
127.0.0.1   公司.com

之後開啟本地localhost,就要用修改後域名來訪問。

document.domain無效的情況，埠不同的情況下，domain無效

postMessage

postMessage是h5的一個新功能之一，由於我們是一家做h5遊戲的公司，不可避免的要巢狀iframe，方便資料提交等。

這裡假設，iframe的Id為 ‘iframe’；

在iframe裡面的js裡要寫上

var message = 'date';
if (parent.document.getElementById(‘iframe‘)) {
      //捕獲iframe
      var iframe = parent.document.getElementById(‘iframe’).contentWindow;
      //傳送訊息
      parent.postMessage(message, "*");
 }

在iframe外面的js裡要寫上

window.addEventListener('message',function(e){
             
},false);

然後就可以拿到message的資料了。

相關文章