前端中的跨域

同源策略？

同源策略/SOP（Same origin policy）是一種約定，屬於瀏覽器的一個安全功能。不一樣源的客戶端腳本在沒有明確受權的狀況下，不能讀寫對方資源。因此a.com下的js腳本採用ajax讀取b.com裏面的文件數據是會報錯的。

基於這個策略，有如下幾種限制：

• cookie：js不能讀取其它域下的cookie，不然你的登陸信息，安全信息就泄露了；
• Storage和IndexDB： 道理同cookie；
• DOM 和 JS 對象；
• AJAX請求：不能發送另外一個域下的Ajax請求；

什麼是跨域

若是違反了同源策略，則就會產生跨域。哪些狀況纔算是跨域呢？

1. 頁面域名不一樣： http://a.com 和 http://b.com 不一樣源
2. 父級域名相同，子域名不一樣： http://a.c.com 和 http://b.c.com 不一樣源
3. 端口不一樣：http://a.com:8888 和 http://a.com:8000 不一樣源
4. 協議不一樣： http://a.com 和 https://a.com 不一樣源

解決跨域的方式

jsonp跨域

jsonp跨域的原理很簡單，借鑑了html中script腳本能夠來自不一樣域的原理。想想是否是script中的src屬性值能夠設置爲來自第三方的js。
可是這也限制了jsonp只能作GET請求，同時須要後端作配合。

舉例說明：

有一個跨域的請求： http://c.com/getInfo?id=xxx。由於同源策略的限制，咱們經過Ajax沒法操做。那麼使用jsonp，該如何繞過跨域的限制呢？直接看代碼：

<script src="http://c.com/getInfo?id=xxx&cb=showInfo">;

這段代碼中相對於咱們剛纔列出接口多了個參數cb=showInfo。這個參數值表明數據請求成功後回調方法，這個方法用於處理接口返回的數據。而在服務端，在返回數據時，要作一些處理。具體方式就是返回如何格式的數據：

showInfo(data)。

data就是經過接口想要得到數據。

document.domain

若是兩個源的父級域名一致，例如兩個站點分別爲http://a.c.com 和 http://b.c.com。 則能夠經過設置window.domain = 'c.com'這樣一來，他們的域也就相同了，能夠互相操做。可是這種方式的缺點就是隻適用於根域名一致的狀況。也就是說，咱們不能夠將http://a.c.com的 window.domain設置爲 d.com 或者 e.com之類的。只能設置爲它根域名下的某個域。

document.domain + iframe

雖然經過document.domain的方式，咱們只能在根域名一致的狀況下進行跨域。可是若是配合iframe，則能夠擴展咱們的能力範圍。例如：想要使a.com頁面不跳轉也能獲得b.com裏的數據。在a.com頁面中使用一個隱藏的iframe來充當一箇中間人角色，由iframe去獲取b.com的數據，而後a.com再去獲得iframe獲取到的數據。

cros跨域解決方案

CORS：一種跨域訪問的機制，可讓AJAX實現跨域訪問；CORS容許一個域上的網絡應用向另外一個域提交跨域AJAX請求。 服務器設置Access-Control-Allow-Origin HTTP響應頭以後，瀏覽器將會容許跨域請求． 就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功，仍是應該失敗。

更多信息能夠參考一種新的跨域解決方案

Web sockets來跨域

同源策略對websocket請求不適用。
其原理：在JS建立了web socket以後，會有一個HTTP請求發送到瀏覽器以發起鏈接。取得服務器響應後，創建的鏈接會使用HTTP升級從HTTP協議交換爲web sockt協議。

nginx轉發

經過代理設置，進行轉發，同樣能夠達到跨域的目的。