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" },'*');
})
复制代码

成功~ 准点下班