Vue嵌入iframe,iframe如何跨域調用vue內路由

這兩天遇到一個跨域的業務邏輯，具體以下圖：

關於跨域

URL例子	說明	是否容許通訊
http://www.1.com/1.js http://www.1.com/2.js	同一個域名	容許
http://www.1.com/abc/1.js http://www.1.com/def/2.js	同一域名不一樣文件夾下	容許
http://www.1.com:8000/1.js http://www.1.com/2.js	同一域名不一樣端口	不容許
https://www.1.com/1.js http://www.1.com/2.js	同一域名不一樣協議	不容許
http://www.1.com/1.js http://123.123.123.12/2.js	同一域名,以及對應ip	不容許
http://www.1.com/1.js http://abc.1.com/2.js	主域相同，子域不一樣	不容許
http://www.1.com/1.js http://abc.1.com/2.js	同一域名，不一樣二級域名	不容許
http://www.1.com/1.js http://www.2.com/1.js	不一樣域名	不容許

項目

項目中vue域名爲a.com,iframe域名爲b.com。明顯跨域了。

跨域解決辦法不少，常見的 1.jsonp

2.postMessage

3.設置document.domain 主域必須相同子域不一樣下

4.window.name 經過全局變量的方式 window.parent.xx這種方式獲取內容

5.location.hash 傳遞相關屬性

6.服務器轉發代理

7.服務器配置CORS接口,CORS是一個W3C標準,全稱是"跨域資源共享"（Cross-origin resource sharing）它容許瀏覽器向跨源服務器，發XMLHttpRequest請求,從而克服了ajax只能同源使用的限制。

項目的需求是路由跳轉，主業務邏輯iframe端完成跳轉到vue路由中。不涉及到接口數據請求，嘗試使用了 4方法，2方法。其中4方法調用時候，仍然報錯 crosse origin錯誤

不過在同一服務器下，嘗試叫後臺修改服務器配置容許

Access-Control-Allow-Origin: *
複製代碼

未果...

查閱資料使用posteMessage，由於項目是H5打包，新的API能夠使用，不考慮兼容。

項目中vue文件main.js定義函數

function receiveMessageFromIframePage (event) {
 console.log(event.data,event)
 if (event.data.data.includes('backHome')) {
   router.push({name: 'home'})
 } else if (event.data.data.includes('iframeNOlogin')) {
   router.push({name: 'login'})
 }
}


window.addEventListener("message", receiveMessageFromIframePage, false);
複製代碼

iframe 退出按鈕的 的logout.html中綁定事件,這裏必需要ready以後綁定。

$(document).ready(function(){
    window.parent.postMessage({ data:"backHome" },'*');
})
複製代碼

成功~ 準點下班