什麼是跨域？
跨域是指的一個域名下的文檔或者腳本試圖去請求另一個域名下的資源，這裡跨域是廣義的。
廣義的跨域
1）資源跳轉：A連結、重定向、表單送出
2）資源嵌入：<link> 、<script> 、<img> 、<frame>等dom标簽，還有樣式中background：url()、@font-face()等檔案外鍊
3）腳本請求：js發起的ajax請求、dom和js對象的跨域操作等
其實我們通常所說的跨域是狹義的，是由于浏覽器的同源政策限制的一類請求場景。
什麼是同源政策？
同源政策/SOP（same origin policy）是一種約定，由netsscape公司1995年引入浏覽器，它是浏覽器最核心也最基本的安全功能，如果缺少了同源政策，浏覽器很容易受到XSS、CSRF等攻擊。所謂同源是指“協定+域名+端口号”三者相同，即便兩個不同的域名指向同一個IP位址，也非同源。
同源政策限制以下幾種行為：
1）cookie、localStorage 和 indexDB無法讀取
2）DOM和JS對象無法擷取
3）AJAX請求不能發送
常見的跨域場景
跨域解決方案
1、通過jsonp跨域
2、document.domain + iframe跨域
3、location.hash + iframe
4、window.name + iframe跨域
5、postMessage跨域
6、跨域資源共享（cors）
7、nginx代理跨域
8、nodejs中間件代理跨域
9、webSocket協定跨域
一、通過jsonp跨域
通常為了減輕web伺服器負載，我們把js、css、img等靜态資源分離到另一台獨立域名的伺服器上，在html頁面中再通過相應的标簽從不同的域名下加載靜态資源，而被浏覽器允許，基于此原理，我們可以通過動态建立script，再請求一個帶參網址實作跨域通信。
1、）原生實作:
服務端傳回如下（傳回時執行全局函數）
2、）jquery ajax:
$.ajax({
url:'http://www.domain2.com:8080/login',
type:'get',
dataType:'jsonp',//請求方式為
jsonpCallback:'onBack',//自定義回調函數
data:{}
})
3、）vue.js
後端node.js代碼示例：
jsonp缺點：隻能實作get一種請求
二、document.domain+iframe跨域
此方案僅限主域相同，子域不同的跨域應用場景。
實作原理：兩個頁面都通過js強制設定document。domain為基礎域，就實作了同域。
1、）父視窗：(
http://www.domain.com/a.html) 子視窗：(
http://child.domain.com/b.html) 三、location.hash+iframe跨域
實作原理： a欲與b跨域互相通信，通過中間頁c來實作。 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js通路來通信。
具體實作：A域：a.html -> B域：b.html -> A域：c.html，a與b不同域隻能通過hash值單向通信，b與c也不同域也隻能單向通信，但c與a同域，是以c可通過parent.parent通路a頁面所有對象。
1.）a.html：(
http://www.domain1.com/a.html) 2.）b.html：(
http://www.domain2.com/b.html) 3.）c.html：(
http://www.domain1.com/c.html) 四、window.name + iframe跨域
window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載後依舊存在，并且可以支援非常長的 name 值（2MB）。
2.）proxy.html：(
http://www.domain1.com/proxy....中間代理頁，與a.html同域，内容為空即可。
3.）b.html：(
總結：通過iframe的src屬性由外域轉向本地域，跨域資料即由iframe的window.name從外域傳遞到本地域。這個就巧妙地繞過了浏覽器的跨域通路限制，但同時它又是安全操作。
五、 postMessage跨域postMessage是HTML5 XMLHttpRequest Level 2中的API，且是為數不多可以跨域操作的window屬性之一，它可用于解決以下方面的問題：
a.） 頁面和其打開的新視窗的資料傳遞
b.） 多視窗之間消息傳遞
c.） 頁面與嵌套的iframe消息傳遞
d.） 上面三個場景的跨域資料傳遞
用法：postMessage(data,origin)方法接受兩個參數
data： html5規範支援任意基本類型或可複制的對象，但部分浏覽器隻支援字元串，是以傳參時最好用JSON.stringify()序列化。
origin： 協定+主機+端口号，也可以設定為"*"，表示可以傳遞給任意視窗，如果要指定和目前視窗同源的話設定為"/"。
普通跨域請求：隻服務端設定Access-Control-Allow-Origin即可，前端無須設定，若要帶cookie請求：前後端都需要設定。
需注意的是：由于同源政策的限制，所讀取的cookie為跨域請求接口所在域的cookie，而非目前頁。如果想實作目前頁cookie的寫入，可參考下文：七、nginx反向代理中設定proxy_cookie_domain 和 八、NodeJs中間件代理中cookieDomainRewrite參數的設定。
目前，所有浏覽器都支援該功能(IE8+：IE8/9需要使用XDomainRequest對象來支援CORS）)，CORS也已經成為主流的跨域解決方案。
1、 前端設定：1.）原生ajax
示例代碼：
2.）jQuery ajax
3.）vue架構
在vue-resource封裝的ajax元件中加入以下代碼：
若後端設定成功，前端浏覽器控制台則不會出現跨域報錯資訊，反之，說明沒設成功。
1.）Java背景：
2.）Nodejs背景示例：
浏覽器跨域通路js、css、img等正常靜态資源被同源政策許可，但iconfont字型檔案(eot|otf|ttf|woff|svg)例外，此時可在nginx的靜态資源伺服器中加入以下配置。
跨域原理： 同源政策是浏覽器的安全政策，不是HTTP協定的一部分。伺服器端調用HTTP接口隻是使用HTTP協定，不會執行JS腳本，不需要同源政策，也就不存在跨越問題。
實作思路：通過nginx配置一個代理伺服器（域名與domain1相同，端口不同）做跳闆機，反向代理通路domain2接口，并且可以順便修改cookie中domain資訊，友善目前域cookie寫入，實作跨域登入。
nginx具體配置：
1、）前端代碼示例
2.) Nodejs背景示例：
node中間件實作跨域代理，原理大緻與nginx相同，都是通過啟一個代理伺服器，實作資料的轉發，也可以通過設定cookieDomainRewrite參數修改響應頭中cookie中域名，實作目前域的cookie寫入，友善接口登入認證。
1、 非vue架構的跨域（2次跨域）利用node + express + http-proxy-middleware搭建一個proxy伺服器。
1.）前端代碼示例：
2.）中間件伺服器：
3.）Nodejs背景同（六：nginx）
2、 vue架構的跨域（1次跨域）利用node + webpack + webpack-dev-server代理接口跨域。在開發環境下，由于vue渲染服務和接口代理服務都是webpack-dev-server同一個，是以頁面與代理接口之間不再跨域，無須設定headers跨域資訊了。
webpack.config.js部配置設定置：
九、 WebSocket協定跨域
WebSocket protocol是HTML5一種新的協定。它實作了浏覽器與伺服器全雙工通信，同時允許跨域通訊，是server push技術的一種很好的實作。
原生WebSocket API使用起來不太友善，我們使用Socket.io，它很好地封裝了webSocket接口，提供了更簡單、靈活的接口，也對不支援webSocket的浏覽器提供了向下相容。
1.）前端代碼：
2.）Nodejs socket背景：
參考文檔：
https://segmentfault.com/a/1190000011145364