vue项目,同一个站点两个域名,解决跨域登陆问题(vue+ifram+postmessage)

项目需求:
一个项目两个域名其中a.com域名,嵌套了b.com域名
当进入b页面的时候就要切换到b.com域名,同时需要保持在a域名下的登陆状态

解决:使用ifram + postMessage

主页面 a域名

a域名下要协商ifram 标签

 

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';
        })
    }
})

你可能感兴趣的:(iframe跨域,postmessage,vue.js,跨域)