前言

作為人們?nèi)粘C端的瀏覽的入口,，瀏覽器出于安全考慮,，采用了同源策略,。換句話(huà)說(shuō),，如果協(xié)議/域名/端口有一個(gè)不同，那么就不符合此同源的前提,。此時(shí)就需要跨域,，否則Ajax請(qǐng)求（任何網(wǎng)絡(luò)請(qǐng)求）會(huì)失敗。

這里就簡(jiǎn)單介紹一些主流Web中的四種跨域的解決方案,。

正文

1,、JSONP

JSONP 的原理很簡(jiǎn)單，就是利用 <script> 標(biāo)簽沒(méi)有跨域限制的“漏洞”,。通過(guò) <script> 標(biāo)簽指向一個(gè)需要訪(fǎng)問(wèn)的地址,，并且我們可以通過(guò)callback的形式就行后續(xù)的邏輯操作。

從上面的demo可以看出JSONP 使用簡(jiǎn)單,，但是只限于 get 請(qǐng)求,。并且當(dāng)我們的項(xiàng)目足夠大的時(shí)候，我們會(huì)發(fā)現(xiàn)我們很容易寫(xiě)出同名的callback,。

這種情況下,，我們多多少少需要自己對(duì)此進(jìn)行封裝，這里簡(jiǎn)單寫(xiě)一種方式,，算是拋磚引玉,，有更好實(shí)現(xiàn)的小伙伴可以評(píng)論區(qū)一起交流,。

function jsonp(url, jsonpCallback, success) { let script = document.createElement('script'); script.src = url; script.async = true; script.type = 'text/javascript'; window[jsonpCallback] = function(data) { success && success(data); }; document.body.appendChild(script);}// 使用方式j(luò)sonp( 'http://xxx', 'callback', function(value) { console.log(value); });

2、CORS

這種方式,，相比較Jsonp,，CORS相對(duì)繁瑣一些。因?yàn)樾枰獮g覽器和后端同時(shí)支持,。實(shí)現(xiàn)CORS通信的關(guān)鍵是后端,。

只要后端實(shí)現(xiàn)了 CORS，就實(shí)現(xiàn)了跨域（瀏覽器會(huì)自動(dòng)進(jìn)行 CORS 通信）,。當(dāng)然,，如果需要兼容IE8、9這種老古董,。我們需要通過(guò) XDomainRequest 來(lái)實(shí)現(xiàn),。

對(duì)于服務(wù)端來(lái)說(shuō)，只需要設(shè)置 Access-Control-Allow-Origin 就可以開(kāi)啟 CORS,。具體的內(nèi)容后端的小伙伴肯定很清楚,。

3、document.domain

這方式相對(duì)局限性比較的大,，因?yàn)橹荒苡糜诙?jí)域名相同的情況下,。

比如 a.mdove.com 和 b.mdove.com 適用于該方式。

當(dāng)然用法也比較的簡(jiǎn)單,，只需要給頁(yè)面添加 document.domain = ‘mdove.com' 即可,。這樣當(dāng)我們的二級(jí)域名都相同，就可以實(shí)現(xiàn)跨域了,。

4,、postMessage

這種方式通常用于獲取嵌入頁(yè)面中的第三方頁(yè)面數(shù)據(jù)。一個(gè)頁(yè)面發(fā)送消息,，另一個(gè)頁(yè)面判斷來(lái)源并接收消息,。不扯犢子了，直接上代碼：

尾聲