前言

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

這里就簡單介紹一些主流Web中的四種跨域的解決方案。

正文

1、JSONP

JSONP 的原理很簡單，就是利用 <script> 標簽沒有跨域限制的“漏洞”。通過 <script> 標簽指向一個需要訪問的地址，并且我們可以通過callback的形式就行后續(xù)的邏輯操作。

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

這種情況下，我們多多少少需要自己對此進行封裝，這里簡單寫一種方式，算是拋磚引玉，有更好實現(xiàn)的小伙伴可以評論區(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);}// 使用方式jsonp( 'http://xxx', 'callback', function(value) { console.log(value); });

2、CORS

這種方式，相比較Jsonp，CORS相對繁瑣一些。因為需要瀏覽器和后端同時支持。實現(xiàn)CORS通信的關鍵是后端。

只要后端實現(xiàn)了 CORS，就實現(xiàn)了跨域（瀏覽器會自動進行 CORS 通信）。當然，如果需要兼容IE8、9這種老古董。我們需要通過 XDomainRequest 來實現(xiàn)。

對于服務端來說，只需要設置 Access-Control-Allow-Origin 就可以開啟 CORS。具體的內(nèi)容后端的小伙伴肯定很清楚。

3、document.domain

這方式相對局限性比較的大，因為只能用于二級域名相同的情況下。

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

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

4、postMessage

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

尾聲