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

創(chuàng)新互聯(lián)建站是一家專業(yè)提供子長企業(yè)網(wǎng)站建設(shè),專注與成都網(wǎng)站設(shè)計、網(wǎng)站制作、HTML5建站、小程序制作等業(yè)務(wù)。10年已為子長眾多企業(yè)、政府機構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進行中。

同源策略

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)賬到黑客的賬戶上等等），后果會非常嚴重！而同源策略就為了防止這種事情發(fā)生，它規(guī)定了A網(wǎng)站下的JS文件只能操作A網(wǎng)站下的數(shù)據(jù)，不能去操作B網(wǎng)站的數(shù)據(jù)。

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

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

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

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

什么是跨域

跨域

跨域的解決方案

方案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標簽的，我們需不需要處理這些script元素？怎么處理？

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

答案

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

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

方案2-跨域資源共享CORS

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

方案3-document.domain

瀏覽器的同源策略使得不同域的框架是不能進行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對象是屬于同一個源還是不同源

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