跨域可以說是前端開發中很常見的一個問題了，雖然網上已經有很多類似的文章，不過本著記錄自己的學習總結想法，還是要自己寫一遍文章記錄一下所學知識。
為什麼會有跨域？
跨域的問題產生是因為瀏覽器的同源策略所導致的。同源策略的出發點是出於瀏覽器的安全所考慮的，如果每個人都可以隨意訪問其他站點的檔案資料，將會產生非常嚴重的安全問題。
那怎麼樣才算是跨域呢？在瀏覽器裡只要滿足以下條件任一個就算跨域：
- 請求協議不同
例：http和https- 域名不同
例：xxx.com和mmm.com- 埠不同
例：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。