首先，我們來先了解一下什么是跨域：
瀏覽器對于JavaScript的同源策略的限制，例如 a.com 下面的js不能調用 b.com 中的js，對象貨數據,因為 a.com 和 b.com 是不同域，所以就有了跨域的出現
那什么才是同域呢？這里簡單解釋一下 同域就是相同域名，端口相同，協議相同
同源策略
說到跨域，我們不得不了解一下什么是同源策略：
請求的url地址，必須與瀏覽器上的url地址處于同域上，也就是域名，端口，協議相同，這就是同源策略的保護，如果瀏覽器對JavaScript沒有同源策略的保護，那么一些重要的機密網站將會很危險，具體怎么才是同源，我這里列出來一個表格：
| 形式 | 結果 |
|---|---|
| 同一域名，不同文件夾 | 成功 |
| 同以域名，同一文件夾 | 成功 |
| 不同域名，文件夾相同 | 失敗 |
| 同一域名，不同端口號 | 失敗 |
| 同一域名，不同的協議 | 失敗 |
下面，我給大家介紹一下解決跨域的幾種常見方案：
jsonp
通常未來減輕web服務器的負載，我們把js、css、img等靜態資源分離到另一條獨立域名的服務器上，在html頁面中在通過相應的標簽從不同的域名下加載靜態資源，而被瀏覽器運行，基于此原理，我們可以通過動態創建script標簽，在請求一個帶參數的網址實現跨域通信，是目前比較常見的跨域方式
ps：jsonp解決跨域最大缺點就是只能實現get一種請求
跨域資源共享(CORS)
CORS(Cross-Origin Resource Sharing) 跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器和服務器應該如何溝通,CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或是響應是應該成功還是失敗
xhr.open('post','http://www.aizhoujin.top/u/cors',true)
xhr.setRquestHeader('Content-Type','application/x-www-from-urlencoded')
xhr.send()
服務器對于 CORS 的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域訪問
document.domin + iframe 跨域
此方案僅限主域相同，子域不同的跨域應用場景
實現原理：兩個頁面都通過js強制設置document.domin為基礎主域，就實現了同域
postMessage跨域
postMessage() 是HTML5新定義的通信機制，所以主流瀏覽器都已實現，該API定義在window對象
otherWindow.postMessage(message,targetOrigin)
message: 要傳遞的消息
targetOrigin： 指定目標窗口的源，在發送消息的時候，如果目標窗口的協議，主機地址或端口著三者的任意一項不匹配targetOrigin提供的值，那么消息就不會被發送，只要三者完全匹配，消息才會觸發
當源匹配時，調用 postMessage() 方法時，目標窗口的window對象會觸發一個 message 事件，在進行監聽事件時，應先判斷origin屬性，忽略來自未知源的消息
