Vue嵌入iframe,iframe如何跨域呼叫vue內路由

紅茶配綠茶發表於2019-03-14
Vue跨域路由

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

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" },'*');
})
複製程式碼

成功~ 準點下班

相關文章