在實際開發中，前端和後端之所以存在跨域的問題，主要是受到了 「同源策略」的限制，「同源」一般是指： 協議、網域名稱（主網域名稱以及子網域名稱）和埠號三者相同，三者中的任何乙個不相同都算作是跨域，不同域之間的相互請求資源就算作是跨域，這樣都是會被限制的；之所以設定同源策略的限制主要是為了避免瀏覽器受到xss、csfr等的攻擊；同源策略限制的內容有： cookie、localstorage、indexddb等儲存資料，dom節點，ajax請求傳送後，被瀏覽器的攔截；但是，img標籤中的src、link中的href以及script中的src是允許跨域載入資源的；
需要注意的是，如果是協議和埠造成的跨域問題，前端是無能為力的，只能通過伺服器的配置來解決；其次，在跨域問題上，僅僅是通過「url的首部」來識別而不會根據網域名稱對應的ip位址來判斷，也就是根據網域名稱，協議，埠來判斷；
跨域並不是請求發布出去，請求是能發出去的，伺服器是能夠收到請求並且正常的返回結果的，只是結果被瀏覽器給攔截了；
跨域的解決方案
1、jsonp原理
利用script標籤沒有跨域限制的漏洞，網頁可以得到從其他源動態產生的json資料。 jsonp請求一定需要對方的伺服器做支援才可以；jsonp主要是通過宣告乙個**函式，然後利用script的src屬性後邊跟上 ？callback=宣告的**函式，來進行資料處理，使用起來非常的簡單和方便，而且可用於解決主流瀏覽器的跨域資料訪問問題；但是，它僅僅只是支援get方法，具有一定的侷限性，而且不安全，容易受到xss攻擊；
2、cors
cors需要瀏覽器和後端同時支援。ie8和ie9需要通過xdomainreauest來進行實現；
其實瀏覽器本身是會自動的進行cors通訊的，因此，實現cors通訊的關鍵是後端，後端需要對請求頭的配置，也就是 access-control-allow-origin的配置，只要後端實現了cors，那麼跨域的問題就解決了；
3、nginx反向**
nginx反向**跨域的實現原理主要是利用了伺服器之間不存在跨域來進行實現的，類似於我們構建的node 本地伺服器進行跨域； nginx反向**的實現就是，通過nginx 配置乙個**伺服器（網域名稱與domain1相同，埠不同）作為跳板機，反向**訪問domain2的介面，並且可以順便修改cookie中的domain資訊，便於當前域的寫入，進而來實現跨域登入；
4、node 伺服器作為中間**進行跨域
同源策略是瀏覽器需要遵循的標準，而如果是伺服器向伺服器請求就無需遵循同源策略；
5、postmessage
postmessage是 html5 xmlhttprequest level2 中的api，而且是為數不多可以跨域操作的 window 屬性之一，它可用於解決以下方面的問題，（1）頁面和其他開啟的新視窗的資料傳遞； （2）多視窗之間的訊息傳遞； （3）頁面與嵌入的iframe訊息傳遞； postmessage（）方法允許來自不同源的指令碼採用非同步方式進行有限的通訊，可以實現跨文字檔、多視窗、跨域訊息傳遞；
6、websockrt
7、window.name + iframe
8、location.hash + iframe
9、document.domain + iframe
前端跨域通訊的幾種方式
本文最初發表於，並在github上持續更新前端的系列文章。歡迎在github上關注我，一起入門和高階前端。以下是正文。前端通訊類的問題，主要包括以下內容 同源策略是乙個概念，就一句話。有什麼限制，就三句話。能說出來即可。如果你不準備，估計也就只能說出ajax。ajax在前後端通訊中經常用到。做業務時...
前端解決跨域的幾種方式
參考1 通過jsonp跨域 jsonp 只支援get請求 jsonp 的優勢在於支援老式瀏覽器，以及可以向不支援 cors 的 請求資料。2 document.domain iframe跨域 3 location.hash iframe 4 window.name iframe跨域 5 postme...
前端跨域通訊的幾種方式
本文最初發表於，並在github上持續更新前端的系列文章。歡迎在github上關注我，一起入門和高階前端。以下是正文。前端通訊類的問題，主要包括以下內容 同源策略是乙個概念，就一句話。有什麼限制，就三句話。能說出來即可。如果你不準備，估計也就只能說出ajax。ajax在前後端通訊中經常用到。做業務時...