快捷導(dǎo)航

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

更新時(shí)間：2017年08月16日 14:56:59 投稿：sss

這篇文章主要介紹了前端跨域的幾種解決方式，詳細(xì)介紹了同源策略并同時(shí)給出了跨域的五種解決方案，具體操作步驟大家可查看下文的詳細(xì)講解，感興趣的小伙伴們可以參考一下。

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

同源策略

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

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

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

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

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

URL	結(jié)果	原因
http://store.company.com/dir2/other.html	同源
http://store.company.com/dir/inner/another.html	同源
https://store.company.com/secure.html	非同源	協(xié)議不同
http://store.company.com:81/dir/etc.html	非同源	端口不同
http://news.company.com/dir/other.html	非同源	主機(jī)不同

什么是跨域

跨域

跨域的解決方案

方案1-JSONP

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

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

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

JSONP是通過(guò)動(dòng)態(tài)的

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

問(wèn)題一：JSONP是需要?jiǎng)討B(tài)創(chuàng)建script標(biāo)簽的，我們需不需要處理這些script元素？怎么處理？

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

答案

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

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

方案2-跨域資源共享CORS

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

方案3-document.domain

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

使用條件

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

方案4-window.name

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

方案5-window.postMessage

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

以上就是這篇文章的全部?jī)?nèi)容了，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助~如果有疑問(wèn)大家可以留言交流，謝謝大家對(duì)腳本之家的支持!

您可能感興趣的文章: