首先，我們來先了解一下什么是跨域：
瀏覽器對于JavaScript的同源策略的限制，例如 a.com 下面的js不能調(diào)用 b.com 中的js附较，對象貨數(shù)據(jù),因為 a.com 和 b.com 是不同域钞馁，所以就有了跨域的出現(xiàn)
那什么才是同域呢？這里簡單解釋一下 同域就是相同域名忧饭，端口相同，協(xié)議相同
同源策略
說到跨域筷畦，我們不得不了解一下什么是同源策略：
請求的url地址词裤，必須與瀏覽器上的url地址處于同域上刺洒，也就是域名，端口吼砂，協(xié)議相同逆航，這就是同源策略的保護，如果瀏覽器對JavaScript沒有同源策略的保護渔肩，那么一些重要的機密網(wǎng)站將會很危險因俐，具體怎么才是同源，我這里列出來一個表格：
| 形式 | 結(jié)果 |
|---|---|
| 同一域名周偎，不同文件夾 | 成功 |
| 同以域名抹剩，同一文件夾 | 成功 |
| 不同域名，文件夾相同 | 失敗 |
| 同一域名蓉坎，不同端口號 | 失敗 |
| 同一域名澳眷，不同的協(xié)議 | 失敗 |
下面，我給大家介紹一下解決跨域的幾種常見方案：
jsonp
通常未來減輕web服務(wù)器的負載袍嬉，我們把js境蔼、css、img等靜態(tài)資源分離到另一條獨立域名的服務(wù)器上伺通，在html頁面中在通過相應(yīng)的標簽從不同的域名下加載靜態(tài)資源箍土，而被瀏覽器運行，基于此原理罐监，我們可以通過動態(tài)創(chuàng)建script標簽吴藻，在請求一個帶參數(shù)的網(wǎng)址實現(xiàn)跨域通信，是目前比較常見的跨域方式
ps：jsonp解決跨域最大缺點就是只能實現(xiàn)get一種請求
跨域資源共享(CORS)
CORS(Cross-Origin Resource Sharing) 跨域資源共享弓柱，定義了必須在訪問跨域資源時沟堡，瀏覽器和服務(wù)器應(yīng)該如何溝通,CORS背后的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務(wù)器進行溝通，從而決定請求或是響應(yīng)是應(yīng)該成功還是失敗
xhr.open('post','http://www.aizhoujin.top/u/cors',true)
xhr.setRquestHeader('Content-Type','application/x-www-from-urlencoded')
xhr.send()
服務(wù)器對于 CORS 的支持矢空，主要就是通過設(shè)置Access-Control-Allow-Origin來進行的航罗。如果瀏覽器檢測到相應(yīng)的設(shè)置，就可以允許Ajax進行跨域訪問
document.domin + iframe 跨域
此方案僅限主域相同屁药，子域不同的跨域應(yīng)用場景
實現(xiàn)原理：兩個頁面都通過js強制設(shè)置document.domin為基礎(chǔ)主域粥血，就實現(xiàn)了同域
postMessage跨域
postMessage() 是HTML5新定義的通信機制，所以主流瀏覽器都已實現(xiàn)酿箭，該API定義在window對象
otherWindow.postMessage(message,targetOrigin)
message: 要傳遞的消息
targetOrigin： 指定目標窗口的源复亏，在發(fā)送消息的時候，如果目標窗口的協(xié)議缭嫡，主機地址或端口著三者的任意一項不匹配targetOrigin提供的值缔御，那么消息就不會被發(fā)送，只要三者完全匹配妇蛀，消息才會觸發(fā)
當源匹配時耕突，調(diào)用 postMessage() 方法時笤成，目標窗口的window對象會觸發(fā)一個 message 事件，在進行監(jiān)聽事件時有勾，應(yīng)先判斷origin屬性疹启，忽略來自未知源的消息
