前言
作為人們?nèi)粘C端的瀏覽的入口，瀏覽器出于安全考慮，采用了同源策略。換句話說，如果協(xié)議/域名/端口有一個(gè)不同，那么就不符合此同源的前提。此時(shí)就需要跨域，否則Ajax請(qǐng)求（任何網(wǎng)絡(luò)請(qǐng)求）會(huì)失敗。
這里就簡(jiǎn)單介紹一些主流Web中的四種跨域的解決方案。
正文
1、JSONP
JSONP 的原理很簡(jiǎn)單，就是利用 <script> 標(biāo)簽沒有跨域限制的“漏洞”。通過 <script> 標(biāo)簽指向一個(gè)需要訪問的地址，并且我們可以通過callback的形式就行后續(xù)的邏輯操作。
<script src="http://domain/api?param1=6¶m2=66¶m3=666&callback=jsonp"></script>
<script>
function jsonp(data) {
console.log(data)
}
</script>
從上面的demo可以看出JSONP 使用簡(jiǎn)單，但是只限于 get 請(qǐng)求。并且當(dāng)我們的項(xiàng)目足夠大的時(shí)候，我們會(huì)發(fā)現(xiàn)我們很容易寫出同名的callback。
這種情況下，我們多多少少需要自己對(duì)此進(jìn)行封裝，這里簡(jiǎn)單寫一種方式，算是拋磚引玉，有更好實(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);
}
// 使用方式
jsonp(
"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這種老古董。我們需要通過 XDomainRequest 來實(shí)現(xiàn)。
對(duì)于服務(wù)端來說，只需要設(shè)置 Access-Control-Allow-Origin 就可以開啟 CORS。具體的內(nèi)容后端的小伙伴肯定很清楚。
3、document.domain
這方式相對(duì)局限性比較的大，因?yàn)橹荒苡糜诙?jí)域名相同的情況下。
比如 a.mdove.com 和 b.mdove.com 適用于該方式。
當(dāng)然用法也比較的簡(jiǎn)單，只需要給頁面添加 document.domain = ‘mdove.com' 即可。這樣當(dāng)我們的二級(jí)域名都相同，就可以實(shí)現(xiàn)跨域了。
4、postMessage
這種方式通常用于獲取嵌入頁面中的第三方頁面數(shù)據(jù)。一個(gè)頁面發(fā)送消息，另一個(gè)頁面判斷來源并接收消息。不扯犢子了，直接上代碼：
// 發(fā)送消息端
window.parent.postMessage('message', 'http://test.com');
// 接收消息端
var mc = new MessageChannel();
mc.addEventListener('message', (event) => {
var origin = event.origin || event.originalEvent.origin;
if (origin === 'http://test.com') {
console.log('驗(yàn)證通過')
}
});
尾聲
四種方式羅列完畢，不知道小伙伴們有沒有收獲？或者有更好更巧妙的方式，歡迎評(píng)論區(qū)一同交流。
