跨域問題經常使用4種方法解決方案

跨域問題

1.JSONP：動態插入script標籤，經過script標籤引入一個js文件，這個文件載入成功以後會執行咱們在url參數中制定的函數，而且會把咱們須要的json數據傳入

代碼實現

Jquery方法

$.getJSON("http://a.com/data.php?callback=?",function dosomething(jsondata){
    //處理得到的jsondata數據
})

jquery會自動生成一個全局函數來替換callback=?中的問號，以後獲取到數據後又會自動銷燬，實際上就是起一個臨時代理函數的做用。
$.getJSON會自動判斷是否跨域，不跨域的話，就調用普通的ajax方法；跨域的話，則會以異步加載js文件的形式來調用jsonp的回調函數。
getJSON: function( url, data, callback ) {
    return jQuery.get( url, data, callback, "json" );
}

2.window.name+iframe

Iframe的src屬性由外域轉向本地域，跨域數據即由iframe的window.name從外域傳遞到本地域，巧妙的繞過了瀏覽器的跨域訪問限制，name 值在不一樣的頁面（甚至不一樣域名）加載後依舊存在，而且能夠支持很是長的 name 值（2MB）。

代碼實現：

var data = '';
var ifr = document.createElement('iframe');
ifr.src = "http://localhost:8081/data.html";
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function() {
    ifr.onload = function() {
        data = ifr.contentWindow.name;
        console.log('收到數據:', data);
    };
    ifr.src = "http://localhost:8080/同目錄沒有用.html";
}

把data.html頁面載入進來?

顯然咱們不能直接在跨域1.html頁面中經過改變window.location來載入data.html頁面，
由於咱們想要即便跨域1.html頁面不跳轉也能獲得data.html裏的數據。
答案就是在跨域1.html頁面中使用一個隱藏的iframe來充當一箇中間人角色，由iframe去獲取data.html的數據，而後跨域1.html再去獲得iframe獲取到的數據。
充當中間人的iframe想要獲取到data.html的經過window.name設置的數據，只須要把這個iframe的src設爲data.html就好了。而後跨域1.html想要獲得iframe所獲取到的數據，也就是想要獲得iframe的window.name的值，還必須把這個iframe的src設成跟跨域1.html頁面同一個域才行，否則根據前面講的同源策略，跨域1.html是不能訪問到iframe裏的window.name屬性的。這就是設置iframe的src='同目錄沒有用.html'的緣由。

3.H5中的postMessage跨文檔信息傳輸Cross Document Messaging

代碼實現：

A.Html

<iframe src="http://localhost:8081/b.html"></iframe>

window.onload = function() {
    var targetOrigin = 'http://localhost:8081';
    window.frames[0].postMessage('要發了', targetOrigin);

//otherwindow.postMessage(message, targetOrigin)中，otherwindow是對接收信息頁的window引用，能夠是iframe的contentwindow.

Message是須要發送的信息string，targetOrigin是用於限制otherwindow，*表示不作限制
}
window.addEventListener('message', function(e) {
    console.log('a收到消息', e.data);
});

B.Html

 window.addEventListener('message', function(e) {

        if(e.source != window.parent) {

   return;

        }

        let data = e.data;

        console.log('b.html 接收到的消息:', data);

        parent.postMessage('我已經接收到消息了!', e.origin);

});

4.CORS 是一個 W3C 標準，全稱是"跨域資源共享"（Cross-origin resource sharing）它容許瀏覽器向跨源服務器，發出 XMLHttpRequest 請求，從而克服了 ajax 只能同源使用的限制。

CORS 須要瀏覽器和服務器同時支持才能夠生效，對於開發者來講，CORS 通訊與同源的 ajax 通訊沒有差異，代碼徹底同樣。瀏覽器一旦發現 ajax 請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感受。

所以，實現 CORS 通訊的關鍵是服務器。只要服務器實現了 CORS 接口，就能夠跨源通訊。服務器設置相應頭中的 Access-Control-Allow-Origin，瀏覽器容許跨域請求，須要瀏覽器支持H5，該值要與請求頭中 Origin一致才能生效，不然將跨域失敗。