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

成功~ 准点下班