沒有歸納之前對跨域的一些說法是模糊的，什么jsonp啊，跨域原理啊，心里只有一個大概的說法，知道這個東西，然后用的時候直接百度Ctrl+C，后來閑下來決定整理一波這些知識點，需知其所以然。
什么是跨域
域名相同端口號相同協議相同
那么以上條件只要有一個不同，都被當作是不同的源，會出現跨域的問題。
為什么會出現這個問題呢？因為瀏覽器的同源策略。簡單來說：同源策略限制了從同一個源加載的文檔或腳本如何與來自另一個源的資源進行交互。這是一個用于隔離潛在惡意文件的重要安全機制。這個安全機制大致限制了兩個方面：一是針對
接口的請求：CSRF攻擊。某天你登錄了你的銀行賬戶操作XXX，那么在你訪問某些非法網站的時候，如果沒有同源策略，它向銀行的接口發起請求（瀏覽器會自動帶上相關的cookie），假設銀行的服務端是根據cookie來判斷登錄狀態的話，非法網站就相當于登錄了你的銀行賬戶......二是針對
Dom的查詢。某天你郵箱收到了一個郵件，說你的銀行賬戶有危險，然后你點擊進去一看，跟以前登錄的頁面一模一樣，你立馬輸入了你的賬號密碼......這個頁面其實是一個釣魚網站，里面內嵌了一個iframe
<iframe src="某銀行網頁"></iframe>
// 由于沒有同源策略的限制，釣魚網站可以直接拿到別的網站的Dom
const iframe = window.frames['yinhang']
const node = iframe.document.getElementById('你輸入賬號密碼的Input')
console.log(node) // ok，拿到密碼，跑路
那么，其實這是瀏覽器對我們的一種保護機制，把壞人擋在門外。那么，問題來了，我們怎么確定門外的人到底是好人還是壞人呢？瀏覽器關上了壞人的一扇門，留給了我們好人一扇窗。
好人的跨域方式
接口請求之JSONP
JSONP跟JSON沒有關系..就好像JavaScript和Java一樣
瀏覽器對script、img（這些標簽的請求方式都是GET，所以jsonp不支持POST）這種標簽沒有限制，我們就可以這樣干
前端代碼
<script type='text/javascript'>
后端返回直接執行的方法，相當于執行這個方法，由于后端把返回的數據放在方法的參數里，所以這里能拿到res。
cb = function(res) {
console.log(res)
}
</script>
<!-- 傳入數據是msg，傳入一個回調方式cb -->
<script src='http://xxxxx/api/jsonp?msg=helloWorld&cb=cb' type='text/javascript'></script>
服務端類似這樣返回
static async jsonp(ctx) {
// 獲取前端傳入的參數
const query = ctx.request.query
// query.cb獲取到前端傳入的cb字段。
// 由于前端是用script標簽發起的請求，
// 所以前端請求到的資源其實是這樣的一段js代碼 cb(服務端返回的數據)，所以前端就直接執行了
ctx.body = `$ {query.cb} (服務端返回的數據)`
}
接口請求之CORS跨域
CORS（Cross-Origin Resource Sharing）跨域資源共享，定義了必須在訪問跨域資源時，瀏覽器與服務器應該如何溝通。CORS的基本思想就是使用自定義的HTTP頭部讓瀏覽器與服務器進行溝通，從而決定請求或響應是應該成功還是失敗。目前，所有瀏覽器都支持該功能，IE瀏覽器不能低于IE10。整個CORS通信過程，都是瀏覽器自動完成，不需要用戶參與。對于開發者來說，CORS通信與同源的AJAX通信沒有差別，代碼完全一樣。瀏覽器一旦發現AJAX請求跨源，就會自動添加一些附加的頭信息，有時還會多出一次附加的請求，但用戶不會有感覺。
因此，實現CORS通信的關鍵是服務器。只要服務器實現了CORS接口，就可以跨源通信。
服務器端對于CORS的支持，主要就是通過設置Access-Control-Allow-Origin來進行的。如果瀏覽器檢測到相應的設置，就可以允許Ajax進行跨域的訪問。更多有關跨域資源共享 CORS 的知識
瀏覽器中可以查看對應的響應頭，舉個例子，如下
服務端允許CORS，服務端需要針對接口設置的一系列響應頭 (Response Headers)
該字段必需。設置允許請求的域名，多個域名以逗號分隔，也可以設置成 * 即允許所有源訪問
Access-Control-Allow-Origin: http://www.YOURDOMAIN.com
該字段必需。設置允許請求的方法，多個方法以逗號分隔
Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS
該字段可選。設置允許請求自定義的請求頭字段，多個字段以逗號分隔
Access-Control-Allow-Headers: Authorization
該字段可選。設置是否允許發送 Cookies
Access-Control-Allow-Credentials: true
瀏覽器將CORS請求分成兩類：簡單請求（simple request）和非簡單請求（not-so-simple request）。
1.簡單請求
目前大多數情況都采用這種方式。簡單請求只需要設置Access-Control-Allow-Origin即可。滿足以下兩個條件，就屬于簡單請求。
- 請求方法是這三種方法之一：HEAD，GET，POST
- HTTP頭不超出一下幾種字段
Accept
Accept-Language
Content-Language
Last-Event-ID
Content-Type：只限于三個值application/x-www-form-urlencoded、multipart/form-data、text/plain
2.非簡單請求
非簡單請求會發出一次預檢測請求，返回碼是204，預檢測通過才會真正發出請求，這才返回200。來看栗子：
非簡單請求需要根據不同情況配置不同的響應頭，一系列響應頭配置項見上方
接口請求之使用代理跨域
這個說法相信不陌生，我們依然使用前端域名請求，然后有一個中介商---代理把這個請求轉發到真正的后端域名上，那也就不存在跨域問題了。
比較普遍的Nginx，簡單的配置一下就可以了。了解更多的配置信息：nginx詳解
server{
# 監聽9099端口
listen 9099;
# 本地的域名是localhost
server_name localhost;
#凡是localhost:9099/api這個樣子的，都轉發到真正的服務端地址http://baidu.com
location ^~ /api {
proxy_pass http://baidu.com;
}
}
然后前端這邊的請求地址是http://localhost:9099/api/xxx,然后Nginx監聽到地址是localhost:9099/api的請求，就幫我們轉發到真正的服務端地址http://baidu.com
CORS與JSONP的使用目的相同，但是比JSONP更強大。JSONP只支持GET請求，CORS支持所有類型的HTTP請求。JSONP的優勢在于支持老式瀏覽器，以及在服務端同意jsonp方式時，可以向不支持CORS的網站請求數據。Nginx可以說是最方便的，不過需要部署Nginx才行，需要對服務器有一定的理解，不太適合剛入門的同學，當然也可以請后臺同學幫忙部署。
跨窗口操作DOM之postMessage
window.postMessage(data,origin) 是HTML5的一個接口，專注實現不同窗口不同頁面的跨域通訊。
| 參數 | 描述 |
|---|---|
| data | 要傳遞的數據 |
| origin | 字符串參數，指明目標窗口的源，協議+主機+端口號[+URL]，URL會被忽略，所以可以不寫，這個參數是為了安全考慮，postMessage()方法只會將message傳遞給指定窗口，當然如果愿意也可以建參數設置為"*"，這樣可以傳遞給任意窗口，如果要指定和當前窗口同源的話設置為"/"。 |
現在是這么一個情況,由于同源策略的限制下，a.html不能操作iframe(b.html)里面的dom，那么使用postMessage就可以解決這一情況
<html>
<div>
<button @click="postMessage">給iframe發消息</button>
<iframe id="myIframe" src="b.html"></iframe>
</div>
<script>
var myIframe = document.getElementById('myIframe');
myIframe.contentWindow.postMessage('hello world!', 'b.html');
</script>
</html>
然后b.html頁面通過message事件監聽并接受消息:
window.addEventListener('message',function(event) {
var data = event.data; //消息
var origin = event.origin; //消息來源地址
var source = event.source; //消息來源的Window對象
// 為了安全性，一定要對來源做校驗
if (origin == "a.html") {
alert(data); //hello world!
source.postMessage('回信啦', 'a.html'); // a.html頁面也用message方法接收就行
}
});
跨窗口操作DOM之document.domain
這種方式只適合主域名相同，但子域名不同的iframe跨域。
比如主域名是http://baidu.com/:8888，子域名是http://child.baidu.com/:8888，這種情況下給兩個頁面設置相同的document.domain即document.domain = baidu.com就可以訪問各自的window對象了。
參考文章
讀后感
