iframe postMessage 跨域怎么办呀

iframe postMessage 跨域怎么办呀

    window.top.postMessage(
        data,
        "*"
      );
Uncaught DOMException: Blocked a frame with origin "http://10.61.186.236:8088" from accessing a cross-origin frame.
    at et (http://10.61.186.236:8088/static/js/chunk-vendors.a304166b.js:26:9567)
    at Object.get [as iframeWin] (http://10.61.186.236:8088/static/js/chunk-vendors.a304166b.js:26:8793)
    at Vr.Fr.get [as iframeWin] (http://10.61.186.236:8088/static/js/chunk-vendors.a304166b.js:26:41442)
    at a.sendMegToIframe (http://10.61.186.236:8088/static/js/chunk-25c43fe5.f5fe1de5.js:1:159257)
    at http://10.61.186.236:8088/static/js/chunk-25c43fe5.f5fe1de5.js:1:159656
et @ chunk-vendors.a304166b.js:26
get @ chunk-vendors.a304166b.js:26
Vr.Fr.get @ chunk-vendors.a304166b.js:26
sendMegToIframe @ chunk-25c43fe5.f5fe1de5.js:1
(匿名) @ chunk-25c43fe5.f5fe1de5.js:1
setTimeout(异步)
docShow @ chunk-25c43fe5.f5fe1de5.js:1
Bn @ chunk-vendors.a304166b.js:26
n @ chunk-vendors.a304166b.js:26
Bn @ chunk-vendors.a304166b.js:26
Pi.e.$emit @ chunk-vendors.a304166b.js:26
handleClick @ chunk-vendors.a304166b.js:43
Bn @ chunk-vendors.a304166b.js:26
n @ chunk-vendors.a304166b.js:26
Ia.o._wrapper @ chunk-vendors.a304166b.js:26
index.156185b6.js:1 

可以设置目标网站的响应头试试,完善 Access-Control-Allow-Origin 字段,允许来自其他域名的请求,还是不行,使用代理试试

不知道你这个问题是否已经解决, 如果还没有解决的话:
  • 你可以看下这个问题的回答https://ask.csdn.net/questions/937656
  • 这篇博客你也可以参考下:iframe子向父跨域传递数据 postMessage
  • 除此之外, 这篇博客: iframe内嵌及跨域通信中的 iframe跨域通讯之postMessage 部分也许能够解决你的问题, 你可以仔细阅读以下内容或者直接跳转源博客中阅读:

    postMessage是html5的新特性,具体介绍看传送门。

    postMessage介绍

    MDN postMessage

    兼容性 IE8以上

    can I use

    我们可以通过html5这个新特性进行iframe间的跨域通信,使用postMessage进行数据传递,通过Message监听通信事件。举个🌰

    网页a

    document.domain = 'easonwong.com';
    var ifr = document.createElement('iframe');
    ifr.src = 'http://script.easonwong.com';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    // 发送数据
    ifr.postmessage('hello, I`m a', 'http://script.easonwong.com');
    

    网页b

    // 监听message事件
    window.addEventListener('message', receiver, false);
    function receiver(e) {
        if (e.origin == 'http://www.easonwong.com') {
            if (e.data == 'hello, I`m a') {
                e.source.postMessage('hello, I`m b', e.origin);信息
            }
        }
    }
    

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^