動態

詳情 返回 返回

vue項目,同一個站點兩個域名,解決跨域登陸問題(vue+ifram+postmessage) - 動態 詳情

項目需求:
一個項目兩個域名其中a.com域名,嵌套了b.com域名
當進入b頁面的時候就要切換到b.com域名,同時需要保持在a域名下的登陸狀態

解決:使用ifram + postMessage

主頁面 a域名

a域名下要協商ifram 標籤

 <iframe id="child" ref="iframBox" src="http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334"></iframe>

a.com域名下面 ,點擊Button按鈕跳轉B頁面(b.com域名)

//點擊事件
    videomediate () {
      document.getElementById('child')
        .contentWindow.postMessage({ meg: '這個是message', handleType: 'loginIfram', id: 666 },
          "http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334")
    },

main.js
因為頁面跳轉先走main.js ,所以拿到消息我就先登錄一下

拿到消息的時候在進行頁面跳轉 這樣就可以在頁面重定向的時候解決跨域登陸問題

window.addEventListener('message', function (e) {
    if (e.data.handleType == 'loginIfram') {
        var newWindow = window.open();  //提前申明這樣防止直接打開網頁谷歌攔截問題
        // 重新登錄一遍
        login({
            password: '123456',
            username: '15056382531',
        }).then(res => {
            console.log('當前登陸成功');
            newWindow.location.href = 'http://127.0.0.1:8082/#/mediation/liveRoom?partyids=680&id=334';
        })
    }
})
user avatar honwhy 頭像 guochenglong 頭像 zs_staria 頭像 u_16307147 頭像 wszgrcy 頭像 aresn 頭像 nidexiaoxiongruantangna 頭像 13592899917 頭像 lpicker 頭像 refanbanzhang 頭像 cricis 頭像 ethanprocess 頭像
點贊 29 用戶, 點贊了這篇動態!
點贊

Add a new 評論

Some HTML is okay.