跨域方式
原文地址：https://www.xingkongbj.com/blog/http/cross-origin.html
http://www.ruanyifeng.com/blog/2016/04/same-origin-policy.html
document.domain iframe
- 實現父頁面與其內部 iframe 頁面通訊，要求一級域名相同
- 兩個頁面設置 document.domain 為相同的一級域名，不包含二級域名
location.hash iframe
- 實現父頁面A與其內部 iframe 頁面B通訊，需要與頁面A同源的中轉頁C，并且頁面C是通過頁面B的 iframe 加載
- 父頁面A監聽自身 location.hash 的變化。頁面A的 iframe 加載通訊頁面B，并在地址中加入 #參數
- 通訊頁面B監聽自身 location.hash 的變化，給出響應，創建 iframe 加載頁面C在地址中加入 #回傳參數
- 中轉頁C通過 parent.parent.location.hash 語句來修改父頁面A的 location.hash 值，實現通訊
window.name iframe
- 實現父頁面A與其內部 iframe 頁面B通訊，需要與頁面A同源的中轉頁C，name 值在不同的域名加載后依舊存在，并且可以支持 2MB
- iframe 加載頁面B寫入 window.name 并跳轉到頁面C
- 頁面C與頁面A同源，可以獲取頁面C的 window.name 并且返回給頁面A
window.postMessage iframe
- 實現父頁面A與其內部 iframe 頁面B通訊
- 雙方通過 window.addEventListener('message', onMessage, false) 監聽數據
- 雙方通過在對方的 window 上執行 postMessage('hello world!', "*") 發送數據，要求 postMessage 第二個參數符合對方的域名
CORS
- 頁面無法設置
- 服務器返回響應頭中設置 Access-Control-Allow-Origin: *
- 服務器返回響應頭中設置 Access-Control-Allow-Headers: Origin,X-Requested-With,Content-Type,Accept,Last-Modified
- 服務器返回響應頭中設置 Access-Control-Allow-Methods: POST,GET,OPTIONS,HEAD
- Access-Control-Allow-Methods 中不要包含 PUT 和 DELETE 會對安全有影響，GET、POST、HEAD 是基本方法，不設置也會生效。
JSONP
- 動態創建 script 標簽，在 src 中加入函數名稱參數，并且創建該函數，函數的參數將返回數據。
- 服務器識別 src 中函數名稱參數，拼接函數名稱并把數據寫入函數調用參數中返回。
- script 標簽接收服務器返回 js 文件，執行函數調用。
WebSocket
- 瀏覽器的 API ，提供全雙工、雙向通信、只能與 WebSocket 服務通訊。
更多專業前端知識，請上 【猿2048】www.mk2048.com
總結
- 上一篇： jQuery-弹幕
- 下一篇： angularjs中 $watch 和$