前端项目报错chunk-libs.e495f7a4.js:41 Failed to execute ‘postMessage‘ on ‘DOMWindow‘:

最近一次vue项目打包之后，在控制台出现了一个错误如下

chunk-libs.e495f7a4.js:41 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').

使用postMessage实现跨域 解决'Failed to execute 'postMessage' on 'DOMWindow''

使用iframe+postMessage解决跨域问题，首先来过一遍其中的原理咯

原理：

发送方使用postMessage方法向接收方推送消息，第一个参数为推送的内容，第二个参数是允许被访问的域名；

接收方通过监听message的方法接收数据。

实现跨域就需要有两个不同源的服务器咯

我在本地开启了两个不同端口的tomcat；(以下是我的文件路劲)

①tomcat/webapps/iframe/parent.html(端口号8088)

②tomcat1/webapps/iframe/child.html(端口号8089)

接下来开始编码

tomcat/webapps/iframe/parent.html：

 1 
 4 
 5 
 6 

tomcat1/webapps/iframe/child.html：

1 window.addEventListener('message', function (e) {
      alert(e.data)

2 })

理想状态-YY中：

parent页面通过iframe插入child页面，在输入框中输入内容，然后通过postMessage方法将内容作为信息推送给child，child页面通过监听message方法来接收数据，完美啊！

刷新运行

啪！打脸！！！

这什么鬼？

“提供的来源('localhost://')”与接收方('http://localhost:8088')的来源不匹配

不懂啊，这怎么搞，找一找茬，难道是少了http开头的协议？

试一下：

tomcat/webapps/iframe/parent.html：

 1 
 4 
 5 
 6 

刷新运行

阔以了！(是的可以了，就这么简单)

接下来实现在parent中获取到child中传来的信息：

tomcat/webapps/iframe/parent.html：

 1 
 4 
 5 
 6 

增加了对message的监听事件

tomcat1/webapps/iframe/child.html：

 1 
 2 

向'http://localhost:8088'域下的文件传参'hedfs'

刷新运行

 

OK！完成了，以上便是postMessage配合iframe跨域的方案思想

如果大家有不明白的地方可以关注【H5前端开发社区】微信公众号，给我留言就可以啦！还可以领取淘宝优惠券哦！