前端跨域的幾種解決方式總結(jié)（推薦）

 搞大前端的，肯定都會遇到跨域問題的,雖然網(wǎng)上這方面的資料也很多，但我還是喜歡自己寫一遍，自己理解過、總結(jié)過的東西才記得最深刻。

同源策略

JavaScript 的同源策略，是由Netscape提出的一個著名的安全策略，為了阻止A站的JS去操作別的網(wǎng)站的數(shù)據(jù)。你想啊，你現(xiàn)在打開了瀏覽器，在一個tab窗口中打開了銀行網(wǎng)站，在另外一個tab窗口中打開了一個惡意網(wǎng)站，而那個惡意網(wǎng)站掛了一個的專門修改銀行信息的JavaScript，當(dāng)你訪問這個惡意網(wǎng)站并且執(zhí)行它JavaScript時，你的銀行頁面就會被這個JavaScript修改（比如說獲取你的卡號和密碼，又或者是轉(zhuǎn)賬到黑客的賬戶上等等），后果會非常嚴(yán)重！而同源策略就為了防止這種事情發(fā)生，它規(guī)定了A網(wǎng)站下的JS文件只能操作A網(wǎng)站下的數(shù)據(jù)，不能去操作B網(wǎng)站的數(shù)據(jù)。

為了方便理解,我們把這個詞拆分成同源和策略這2個詞吧（原諒我，我就怕你不理解?。?。

所謂同源指的就是指資源是來自同一個源的。如果兩個頁面擁有相同的協(xié)議，端口號，和主機(jī)（包括子域名和主域名），那么這兩個頁面就屬于同一個源。

所謂策略指的是可以做什么事情。同一個源下的JS可以操作同一個源下的數(shù)據(jù)。

舉個例子來看看你理解了沒有吧，看下面這個鏈接，協(xié)議是http協(xié)議，主機(jī)是store.company.com，端口號一般默認(rèn)的都是80了。然后和下面的這個表中的各個URL進(jìn)行比較，判斷一下哪些是同源的，哪些不是同源的。

什么是跨域

跨域

跨域的解決方案

方案1-JSONP

JSONP是JSON with padding的簡寫。JSONP由兩部分組成:回調(diào)函數(shù)和數(shù)據(jù)。

回調(diào)函數(shù)是客戶端和服務(wù)端約定好一個函數(shù)名，一般在請求中指定。

數(shù)據(jù)是傳入回調(diào)函數(shù)中的JSON數(shù)據(jù)。

JSONP是通過動態(tài)的

callback({"name": "michael"});

問題一：JSONP是需要動態(tài)創(chuàng)建script標(biāo)簽的，我們需不需要處理這些script元素？怎么處理？

問題二：JSONP請求的時候，服務(wù)器發(fā)生錯誤該怎么辦，比如服務(wù)器崩掉，比如返回了404頁面，前端該怎么處理這個錯誤，難道直接讓它拋出么？

答案

JSONP只能實現(xiàn)GET請求，而CORS支持所有類型的HTTP請求

JSONP的兼容性好，不需要XMLHttpRequest的支持

方案2-跨域資源共享CORS

跨域資源共享定義了在必須訪問跨域資源的時，瀏覽器與服務(wù)器應(yīng)該如何溝通。他的原理是使用自定義的 HTTP 頭部，讓服務(wù)器與瀏覽器進(jìn)行溝通，主要是通過設(shè)置響應(yīng)頭的 Access-Control-Allow-Origin 來達(dá)到目的的。

方案3-document.domain

瀏覽器的同源策略使得不同域的框架是不能進(jìn)行JS的交互操作的。比如：有一個頁面是http://www.examples.com/a.htmls,在這個頁面中還有一個http://examples.com/b.htmls，很顯然，a.html與b.html是不同域的，所以我們無法通過在頁面中書寫js代碼來獲取iframe中的東西，但是，如果我們把這2個頁面的document.domain都設(shè)置成相同的域名就可以了，需要注意的是，我們只能把document.domain設(shè)置成自身或更高一級的父域，且主域名必須相同。

使用條件

document.domain適用于不同子域的框架之間的交互。

方案4-window.name

window對象有個name屬性，該屬性有一個特征：即在一個窗口的生命周期內(nèi)，窗口載入的所有頁面都是共享一個window.name的，每個頁面對window.name都有讀寫的權(quán)限，window.name是持久存在一個窗口載入過的所有頁面中的。

方案5-window.postMessage

window.postMessage（message,targetOrigin）方法，可以用來向其他的window對象發(fā)送消息，無論這個window對象是屬于同一個源還是不同源

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識，若有侵權(quán)等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com