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

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

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

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

同源策略

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

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

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

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

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

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	非同源	主機不同

什么是跨域

跨域

跨域的解決方案

方案1-JSONP

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

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

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

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

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

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

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

答案

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

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

方案2-跨域資源共享CORS

跨域資源共享定義了在必須訪問跨域資源的時，瀏覽器與服務器應該如何溝通。他的原理是使用自定義的 HTTP 頭部，讓服務器與瀏覽器進行溝通，主要是通過設置響應頭的 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都設置成相同的域名就可以了，需要注意的是，我們只能把document.domain設置成自身或更高一級的父域，且主域名必須相同。

使用條件

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

方案4-window.name

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

方案5-window.postMessage

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

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

您可能感興趣的文章: