什么是跨域以及幾種簡單解決方案

zhaofeihao 發(fā)布于2019-08-26 11:44 / 521人閱讀

摘要：什么是跨域要明白什么是跨域之前，首先要明白什么是同源策略同源策略就是用來限制從一個(gè)源加載的文檔或腳本與來自另一個(gè)源的資源進(jìn)行交互。最后，解決跨域問題還有一個(gè)更通用更強(qiáng)大的方法，我多帶帶把它拿出來總結(jié)了一篇文章跨域問題的根本解決方案。

什么是跨域？

要明白什么是跨域之前，首先要明白什么是同源策略？

同源策略就是用來限制從一個(gè)源加載的文檔或腳本與來自另一個(gè)源的資源進(jìn)行交互。那怎樣判斷是否是同源呢？

如果協(xié)議，端口（如果指定了）和主機(jī)對(duì)于兩個(gè)頁面是相同的，則兩個(gè)頁面具有相同的源，也就是同源。也就是說，要同時(shí)滿足以下3個(gè)條件，才能叫同源：

協(xié)議相同

端口相同

主機(jī)相同

舉個(gè)例子就一目了然了：

我們來看下面的頁面是否與 http://store.company.com/dir/index.html 是同源的？

http://store.company.com/dir/index2.html 同源

http://store.company.com/dir2/index3.html 同源雖然在不同文件夾下

https://store.company.com/secure.html 不同源不同的協(xié)議(https)

http://store.company.com:81/dir/index.html 不同源不同的端口(81)

http://news.company.com/dir/other.html 不同源不同的主機(jī)(news)

所以當(dāng)面對(duì)跨域問題的時(shí)候，有什么解決方案呢？

跨域的幾種解決方案 document.domain方法

我們來看一個(gè)具體場(chǎng)景：有一個(gè)頁面 http://www.example.com/a.html ，它里面有一個(gè)iframe，這個(gè)iframe的源是 http://example.com/b.html ，很顯然它們是不同源的，所以我們無法在父頁面中操控子頁面的內(nèi)容。

解決方案如下：

所以我們只要將兩個(gè)頁面的document.domain設(shè)置成一致就可以了，要注意的是，document.domain的設(shè)置是有限制的，我們只能把document.domain設(shè)置成自身或更高一級(jí)的父域。

但是，這種方法只能解決主域相同的跨域問題。

window.name方法

window對(duì)象有個(gè)name屬性，該屬性有個(gè)特征：即在一個(gè)窗口(window)的生命周期內(nèi),窗口載入的所有的頁面都是共享一個(gè)window.name的，每個(gè)頁面對(duì)window.name都有讀寫的權(quán)限，window.name是持久存在一個(gè)窗口載入過的所有頁面中的，并不會(huì)因新頁面的載入而進(jìn)行重置。

我們來看一個(gè)具體場(chǎng)景，在一個(gè)頁面 example.com/a.html 中，我們想獲取 data.com/data.html 中的數(shù)據(jù)，以下是解決方案：

JSONP方法

JONSP(JSON with Padding)是JSON的一種使用模式。基本原理如下：

這時(shí)候在a.html中我們得到了一條js的執(zhí)行語句dealData("data")，從而達(dá)到了跨域的目的。

所以JSONP的原理其實(shí)就是利用引入script不限制源的特點(diǎn)，把處理函數(shù)名作為參數(shù)傳入，然后返回執(zhí)行語句，仔細(xì)閱讀以上代碼就可以明白里面的意思了。

如果在jQuery中用JSONP的話就更加簡單了：

注意jQuery會(huì)自動(dòng)生成一個(gè)全局函數(shù)來替換callback=?中的問號(hào)，之后獲取到數(shù)據(jù)后又會(huì)自動(dòng)銷毀，實(shí)際上就是起一個(gè)臨時(shí)代理函數(shù)的作用。$.getJSON方法會(huì)自動(dòng)判斷是否跨域，不跨域的話，就調(diào)用普通的ajax方法；跨域的話，則會(huì)以異步加載js文件的形式來調(diào)用JSONP的回調(diào)函數(shù)。

總結(jié)

除了上述方法外，HTML5還新增了一個(gè)window.postMessage()方法，有興趣的可以自行查閱。

最后，解決跨域問題還有一個(gè)更通用更強(qiáng)大的CORS方法，我多帶帶把它拿出來總結(jié)了一篇文章：跨域問題的根本解決方案CORS 。