前端跨域通訊的幾種方式

本文最初發表於，並在github上持續更新前端的系列文章。歡迎在github上關注我，一起入門和高階前端。

以下是正文。

同源策略是乙個概念，就一句話。有什麼限制，就三句話。能說出來即可。

如果你不準備，估計也就只能說出ajax。

ajax在前後端通訊中經常用到。做業務時，可以借助第三方的庫，比如vue框架裡的庫、jquery也有封裝好的方法。但如果讓你用原生的js去實現，該怎麼做？

這就是考察你的動手能力，以及框架原理的掌握。如果能寫出來，可以體現出你的基本功。

這部分非常重要。無非就是問你：什麼是跨域、跨域有什麼限制、跨域有幾種方式。

下面分別講解。

同源策略：限制從乙個源載入的文件或指令碼如何與來自另乙個源的資源進行互動。這是乙個用於隔離潛在惡意檔案的關鍵的安全機制。（來自mdn官方的解釋）

具體解釋：

（1）源包括三個部分：協議、網域名稱、埠（http協議的預設埠是80）。如果有任何乙個部分不同，則源不同，那就是跨域了。

主要有以下幾種方式：

關於ajax請求，可以看本人的基礎文章：ajax入門和傳送http請求

xmlhttprequest只有在高階瀏覽器中才支援。在回答問題時，這個相容性問題不要忽略。

xmlhttprequest有很多觸發事件，每個事件是怎麼觸發的。

（1）建立xmlhttprequest 物件。

（2）使用open方法設定請求的引數。open(method, url, 是否非同步)。

（3）傳送請求。

（4）註冊事件。 註冊onreadystatechange事件，狀態改變時就會呼叫。

如果要在資料完整請求回來的時候才呼叫，我們需要手動寫一些判斷的邏輯。

（5）獲取返回的資料，更新ui。

get請求舉例：

readystate：（存有 xmlhttprequest 的狀態。從 0 到 4 發生變化）

//獲取 ajax 請求之後的json

util.json = function (options) ,

success: function () ,

error: function () ,

};util.extend(opt, options);

if (opt.url)

for (var key in data)

if (type === 'get')

if (type === 'post')

xhr.onload = function ()

}} else }};

}方式如下：

上面這五種方式，在面試時，都要說出來。

面試會問：jsonp的原理是什麼？怎麼實現的？

在cors和postmessage以前，我們一直都是通過jsonp來做跨域通訊的。

jsonp的實現：

比如說，客戶端這樣寫：

伺服器端這樣寫：

myjsonp(

})

實際開發中，前端的jsonp是這樣實現的：

//

var ws = new websocket('wss:'); //建立websocket的物件。引數可以是 ws 或 wss，後者表示加密。
//把請求發出去
ws.onopen = function (evt) ;
//對方發訊息過來時，我接收
ws.onmessage = function (evt) ;
//關閉連線
ws.onclose = function (evt) ;

fetch 是乙個比較新的api，用來實現cors通訊。用法如下：

// url（必選），options（可選）

fetch('/some/url/', ).then(function (response) ).catch(function (err) );

另外，如果面試官問：「cors為什麼支援跨域的通訊？」

答案：跨域時，瀏覽器會攔截ajax請求，並在http頭中加origin。

url的#後面的內容就叫hash。hash的改變，頁面不會重新整理。這就是用 hash 做跨域通訊的基本原理。

補充：url的?後面的內容叫search。search的改變，會導致頁面重新整理，因此不能做跨域通訊。

使用舉例：

場景：我的頁面 a 通過iframe或frame嵌入了跨域的頁面 b。

現在，我這個a頁面想給b頁面發訊息，怎麼操作呢？

（1）首先，在我的a頁面中：

//偽**

var b = document.getelementsbytagname('iframe');
b.src = b.src + '#' + 'jsonstring';  //我們可以把js 物件，通過 json.stringify()方法轉成 json字串，發給 b

// b中的偽**

window.onhashchange = function () ;

h5中新增的postmessage()方法，可以用來做跨域通訊。既然是h5中新增的，那就一定要提到。

（1）在a視窗中操作如下：向b視窗傳送資料：

// 視窗a(http:a.com)向跨域的視窗b(http:b.com)傳送資訊

bwindow.postmessage('data', ''); //這裡強調的是b視窗裡的window物件

// 在視窗b中監聽 message 事件

awindow.addeventlistener('message', function (event) , false);

前端跨域通訊的幾種方式

本文最初發表於，並在github上持續更新前端的系列文章。歡迎在github上關注我，一起入門和高階前端。以下是正文。前端通訊類的問題，主要包括以下內容 同源策略是乙個概念，就一句話。有什麼限制，就三句話。能說出來即可。如果你不準備，估計也就只能說出ajax。ajax在前後端通訊中經常用到。做業務時...

前端跨域的幾種方式

在實際開發中，前端和後端之所以存在跨域的問題，主要是受到了 同源策略 的限制，同源 一般是指 協議 網域名稱 主網域名稱以及子網域名稱 和埠號三者相同，三者中的任何乙個不相同都算作是跨域，不同域之間的相互請求資源就算作是跨域，這樣都是會被限制的 之所以設定同源策略的限制主要是為了避免瀏覽器受到xss...

前端解決跨域的幾種方式

參考1 通過jsonp跨域 jsonp 只支援get請求 jsonp 的優勢在於支援老式瀏覽器，以及可以向不支援 cors 的 請求資料。2 document.domain iframe跨域 3 location.hash iframe 4 window.name iframe跨域 5 postme...