vue项目中postMessage + ifram 跨域，接收不到消息

Question

场景：
项目中使用了ifram + postmessage进行跨域的 ， 我在a页面发送postmessage事件 ， 在main.js中使用window.addeventListen进行事件监听

下面就是我的两个地址：

# 视屏跨域的地址
VUE_APP_DOMAIN_URL = 'https://fin.fayuan.com/fodr/fodrmediator'

#原地址
VUE_APP_CUR_URL = 'http://tiaojie.court.gov.cn/fodr/fodrmediator'

a页面中：

//html
 <iframe style="width:100%" id="child" ref="iframBox" :src="domainSrc" v-show="true"></iframe>

//data定义需要跨域的地址
 domainSrc: `${process.env.VUE_APP_DOMAIN_URL}`,// 跨域的地址


//点击事件
call(){
      // 执行跨域登陆传参
      document.getElementById('child')
        .contentWindow.postMessage({
          handleType: 'loginIfram',
          partyids: this.checkList.join(","),
          id: this.id,
          loginInfo: {
            pwd: this.userDate.userPwd,
            tel: this.userDate.telephone
          }
        },
          this.domainSrc
        )
}

main.js中监听message事件 ，

const origin = process.env.VUE_APP_CUR_URL //原域名
const mainUrl = process.env.VUE_APP_DOMAIN_URL // 跨域地址
window.addEventListener('message', function (e) {
    let eOrigin = e.origin + '/fodr/fodrmediator'
    const openUrl = `${mainUrl}/#/viewRoom?partyids=${e.data.partyids}&id=${e.data.id}`

    console.log('验证信息是否跨域=>>', e.data.handleType == 'loginIfram', eOrigin == origin);

    if (e.data.handleType == 'loginIfram' && eOrigin == origin) { //这样来验证确保安全
        // const newWindow = window.open('_blank'); //提前申明这样防止直接打开网页谷歌拦截问题
        const newWindow = window.open(); //提前申明这样防止直接打开网页谷歌拦截问题
        console.log('data===>', e.data);
        // 重新登录一遍
        login({
            password: e.data.loginInfo.pwd,
            username: e.data.loginInfo.tel
        }).then(res => {
            if (res.code == 1) {
                console.log('当前登陆成功');
                newWindow.location.href = openUrl;
            }
        })
    }
})

现在就是npm run build之后 ， 页面进入会打印一次mainjs的日志， 当我点击开始发消息的时候就没有日志打印了 ， 好像没有接受到消息还是main，js只会执行一次

江湖救急 急急急 求大牛帮看下

Answer 1

这样看看

 domainSrc: process.env.VUE_APP_DOMAIN_URL