### **什么是跨域？**
瀏覽器出于安全（如果缺少了同源策略，瀏覽器很容易受到XSS、CSFR等攻擊）層面的考慮不允許一個域的javascript腳本和另外一個域的內容進行交互。所謂同源即指在同一個域，就是兩個頁面具有相同的協議（protocol），主機（host）和端口號（port）。當一個請求url的**協議、域名、端口**三者之間任意一個與當前頁面url不同即為跨域。
| 當前請求域名 | 被請求域名 | 是否跨域 | 原因 |
| :-: | :-: | :-: | :-: |
| http://www.a.com | https://www.a.com | 是 | 協議不同 |
| http://www.a.com | http://www.b.com | 是 | 主域名不同 |
| http://x.a.com| http://y.a.com | 是 | 子域名不同 |
| http://www.a.com:80/ | http://www.a.com:81/ | 是 | 端口不同 |
### **非同源限制**
1. 無法讀取非同源網頁的 Cookie、LocalStorage 和 IndexedDB;
2. 無法接觸非同源網頁的 DOM、js對象;
3. 無法向非同源地址發送 AJAX 請求;
### **跨域解決方案**
解決跨域的本質是‘繞過’瀏覽器的同源限制，實現不同源地址的數據交互。
| 方案 | 描述 | 場景應用 |
| :-: | :-: | :-: |
| JSONP | 通過\<script>標簽的src屬性發送帶有callback的Get請求 | 只能發送 **Get** 請求，適合加載不同域名的js、css，img等靜態資源 |
| CORS | CORS全稱"跨域資源共享"（Cross-origin resource sharing）,它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。瀏覽器將CORS跨域請求分為簡單請求和非簡單請求。 | CORS需要瀏覽器和服務器 **同時支持** 。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。在瀏覽器支持的情況下，服務端通過設置請求的相關響應頭來支持跨域，**適合做ajax各種跨域請求** |
| 代理跨域 | 通過服務器代理轉發的方式繞過瀏覽器的同源策略，比如 **nginx** 代理跨域或者 **node中間件** 代理跨域。 | 適合前后端分離的前端項目調后端接口 |
| document.domain + iframe | 實現原理： 兩個頁面都通過js強制設置document.domain為基礎主域，就實現了同域。 | **僅限**主域相同，子域不同的跨域應用場景 |
| location.hash + iframe | 實現原理： a欲與b跨域相互通信，通過中間頁c來實現。 三個頁面，不同域之間利用iframe的location.hash傳值，相同域之間直接js訪問來通信。| |
| window.name + iframe | window.name屬性的獨特之處：name值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB）。| |
| postMessage跨域 | 它可用于解決以下方面的問題:頁面和其打開的新窗口的數據傳遞; 多窗口之間的消息傳遞；頁面與嵌套的iframe的數據傳遞；以上三種場景的數據跨域傳遞 | HTML5新特性，兼容性不好，只適用于主流瀏覽器和IE10+ |
| WebSocket協議跨域 | | HTML5新特性，兼容性不好，只適用于主流瀏覽器和IE10+ |
詳情見 **[九種常見的前端跨域解決方案 - 小銘子 - 慕課網](https://www.imooc.com/article/291931)**
