前端跨域的解決方案

跨域能夠說是前端開發中很常見的一個問題了，雖然網上已經有不少相似的文章，不過本着記錄本身的學習總結想法，仍是要本身寫一遍文章記錄一下所學知識。

爲何會有跨域？

跨域的問題產生是由於瀏覽器的同源策略所致使的。同源策略的出發點是出於瀏覽器的安全所考慮的，若是每一個人均可以隨意訪問其餘站點的文件數據，將會產生很是嚴重的安全問題。

那怎麼樣纔算是跨域呢？在瀏覽器裏只要知足如下條件任一個就算跨域：

1. 請求協議不一樣
   例：http和https
2. 域名不一樣
   例：xxx.com和mmm.com
3. 端口不一樣
   例：xxx.com和xxx.com:81

跨域的幾種解決方法

1. JSONP

JSONP實現跨域的原理是動態建立script標籤，src是具備跨域訪問文件的能力，建立指定的地址和調用特定的回調方法獲取數據，JSONP只支持get方法。

2.CORS

CORS（跨域資源共享）實現跨域的原理是在http請求頭中加上指定的標記來告訴瀏覽器是否容許加載跨域的資源，也是如今主流的跨越解決方案。

3.iframe + location.hash

iframe+location.hash實現跨域是使用iframe加載資源，而後在iframe中修改父窗口的location.hash，由於location.hash的信息會展現在url上，因此url的長度限制了咱們傳輸信息內容的長度。

4. iframe + window.name

iframe+location.hash實現跨域是使用iframe加載資源，而後在iframe窗口加載的內容修改window.name的值，使用了window.name的特性，在當前窗口頁全部加載的頁面共享一個window.name，可是window.name的容量限制爲不超過2m。

5. iframe + document.domain

若是兩個頁面的主域名相同，可是子域名不一樣，能夠修改document.domain爲同一個域名，實現父子域名的跨域通訊，只限制主域名相同的狀況下。（不算嚴格意義上的跨域）

6. postMessage

postMessage是html5標準的新特性，使用該api能夠實現多種場景的跨域通訊，可是在一些比較老舊的瀏覽器可能不支持此方法。

7.反向代理

使用nginx或者nodejs中間件經過反向代理實現跨域訪問。

8.WebSocket協議

WebScoket協議支持跨域通訊。

總結

綜合以上幾種的跨域解決方案來看，解決跨域大都是在服務器端，無論是從安全性仍是實用性上來講。使用前端手段解決跨域的方案或多或少都有點缺陷，前端解決跨域的重點也是在圍繞src的能力來展開，無論是iframe仍是動態建立script。