前端跨域的方法有哪些

這篇文章主要介紹前端跨域的方法有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

同源策略

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

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

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

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

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

什么是跨域

跨域

跨域的解決方案

方案1-JSONP

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

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

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

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

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

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

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

答案

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

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

方案2-跨域資源共享CORS

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

方案3-document.domain

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

使用條件

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

方案4-window.name

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

方案5-window.postMessage

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

以上是“前端跨域的方法有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！