Failed to execute ‘postMessage‘ on ‘DOMWindow‘: The target origin provided (‘http://127.0.0.1:1001‘)

最新推荐文章于 2024-05-05 13:00:27 发布
最新推荐文章于 2024-05-05 13:00:27 发布
阅读量9.9k 收藏 2
点赞数 2
分类专栏： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_45045689/article/details/119571960
版权

以下HTML在http://127.0.0.1:1001下运行，我们打算通过postMessage() 跨域与http://127.0.0.1:1002/1002.html进行通信：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>server1</h1>
  <iframe id="myframe" src="http://127.0.0.1:1002/1002.html" frameborder="0"></iframe>

  <script>
    myframe.onload = function () { //注意要onload之后，才可以用postMessage
      let iframeWindow = myframe.contentWindow;
      iframeWindow.postMessage("宁静致远", "http://127.0.0.1:1002/1002.html");
    }

    //监听B传递的信息
    window.onmessage = function (ev) {
      console.log(ev.data);
    }
  </script>

</body>

</html>

这里需要注意，我们 发送方的引用，即调用postMessage() 那个引用的源要与接受方的源即postMessage()的第二的参数 要同源。否则会报以下错误：
在这里插入图片描述

Bil!
关注
  • 2
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
使用postMessage实现跨域 解决'Failed to execute 'postMessage' on 'DOMWindow''
dieyuebai4709的博客
02-05 4799
使用iframe+postMessage解决跨域问题，首先来过一遍其中的原理咯 原理： 发送方使用postMessage方法向接收方推送消息，第一个参数为推送的内容，第二个参数是允许被访问的域名； 接收方通过监听message的方法接收数据。 实现跨域就需要有两个不同源的服务器咯 我在本地开启了两个不同端口的tomcat；(以下是我的文件路劲) ①tomcat/webapps...
用postMesage实现跨域，并解决Failed to execute 'postMessage' on 'DOMWindow'
热门推荐
monkindey的专栏
04-14 4万+
广告 阿里招聘2020届前端实习生，详情可看https://blog.csdn.net/monkindey/article/details/88960480 前言 看了HTML5的postMessage，觉得好像挺好玩的，突然想要去尝试下，但是前提就是要有两个不同的源 源 = 规则(http/https)+主机(localhost/其他域名)+端口号，只要有一个不一样，那么两个网页就是不同...
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://xxx.cn') does n
隔壁老瓦的专栏
07-16 3万+
Failedtoexecute'postMessage'on'DOMWindow':Thetargetoriginprovided('https://xxx.cn')doesnotmatchtherecipientwindow'sorigin('null'). 使用event.source作为回信对象 具体参见：https://developer.mozi...
解决vue3-ts 调用第三方api报错“Failed to execute ‘postMessage‘ on ‘Window‘: #＜Object＞ could not be cloned.“的问题
幽冥雪羽的博客
03-14 772
这通常意味着你只能发送基本的数据类型（如字符串、数字、布尔值、null、undefined、ArrayBuffer、Blob、ImageBitmap、ImageData、File 和 FileList 等）或者可以序列化为这些类型的对象。常见的不能发送的对象包括函数、DOM 节点、XMLHttpRequest 对象或者其它具有复杂内部状态的对象。虽然使用 ref.value 解包，但是返回的对像不是原始对像，而是一个代理响应式对象内部的真实值，这个代理对象具有额外的属性和方法，导致序列化错误。
Vue进阶（九十二）：应用 postMessage 实现窗口通信
IT全栈 华强工作室
01-19 7623
在前端应用中，窗口间的通信用的地方还是挺多的，比如弹出qq登录认证窗。 postMessage语法 window.postMessage(msg,targetOrigin) 注意postMessage要通过window对象调用！因为这里的window不只是当前window，大部分使用postMessage的时候，都不是本页面的window，而是其他网页的window！如： iframe的con...
maven出现：Failed to execute goal on project …: Could not resolve dependencies for project …
01-20
[INFO] ———————————————————————— [INFO] Reactor Summary for demo 0.0.1-SNAPSHOT: [INFO] [INFO] demo ……………………………………….. FAILURE [18:18 min] [INFO] admin-service ……………………………….. SKIPPED [INFO] user-service ………………………………… SKIPPED [INFO] myweb ………………………………………. SKIPPED [INFO] ———————————————————————— [INFO]
Failed to execute ‘postMessage‘ on ‘DOMWindow‘:
weixin_44134588的博客
10-28 3万+
要做的是两个跨域页面传输传大量的数据,由于url有长度限制,所以拼接的方式行不通,后来查到可以用postmessage来做: <iframe id="myIframe" style="display: none" :src="ifSrc" frameborder="0" ></iframe> 在页面中添加一个iframe标签并隐藏,这里src为为另一个项目的地址; 我最开始想的是,src不能写死,后期肯定会变的,所以就用变量.
iframe 子页面postMessage报错 Failed to execute ‘postMessage‘ on ‘DOMWindow‘
Julie_Go的专栏
12-04 1020
解决方式：在子页面使用postMessage时指定origin。
Failed to execute ‘postMessage‘ on ‘DOMWindow‘: The target origin provided (‘http://localhost:50
最新发布
qubes的专栏
05-05 319
报错: Failed to execute ‘postMessage’ on ‘DOMWindow’: The target origin provided (‘http://localhost:5001’) does not match the recipient window’s origin (‘http://localhost:5000’).
前端项目报错chunk-libs.e495f7a4.js:41 Failed to execute ‘postMessage‘ on ‘DOMWindow‘:
H5爱好者
09-14 5341
最近一次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
当跨消息传输时出现Failed to execute ‘postMessage‘ on ‘DOMWindow‘这个错误时
m0_60489011的博客
09-24 7270
当运行跨消息传输时出现以下这个错误时 我们应该将代码用 open with live server 打开。
Linux 出现telnet: 127.0.0.1: Connection refused错误解决办法
09-15
主要介绍了Linux 出现telnet: connect to address 127.0.0.1: Connection refused错误解决办法的相关资料,需要的朋友可以参考下
Failed to execute goal org...的解决办法
08-30
主要介绍了Failed to execute goal org.apache.maven.plugins:maven-compiler-plugin:3.1的解决办法的相关资料,需要的朋友可以参考下
Failed to execute goal org.apache.maven.plugins:maven-compiler
03-03
在<plugins></plugins>中添加<plugin> <groupId>org.apache.maven.plugins</groupId> <artifactId>maven-compiler-plugin</artifactId> <version>3.8.1</version> <configuration> <source>1.8</source> <target>1.8</target> </configuration> </plugin>
Python 打包问题：Failed to execute script app
01-06
网上有很多教程关于怎么用pyinstaller，这里不做介绍，不懂也可以看pyinstaller帮助：pyinstaller –help 问题描述 在精简pyinstaller打包后的exe时，出现 Failed to execute scripte app 问题。无法定位到具体问题。 使用命令 出现问题命令： pyinstaller -Fw app.py 然而，通过vscode运行，或者python app.py并没有报错，推测可以打包过程中有些依赖没有添加。 但是通过上述命令运行无法获取错误日志。 获取错误日志 去掉 -Fw 重新打包 pyinstaller app.py 命令行调用
浏览器跨域访问
weixin_45951911的博客
11-06 574
什么是跨域资源共享 跨源资源共享 (CORS)是http-基于标头的机制，允许服务器指示任何其他起源S(域、协议或端口)，而不是浏览器应该允许加载资源的自身。CORS还依赖于浏览器向承载跨源资源的服务器发出“预飞”请求的机制，以检查服务器是否允许实际请求。在该预运行中，浏览器发送指示将在实际请求中使用的HTTP方法和标头的标头。 造成跨域的两种策略 浏览器的同源策略会导致跨域，这里同源策略又分为以下两种 DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的if
iframe与父容器之间通信postMessage实践
V_AYA_V的博客
11-24 565
近期一项目有需求在祖传代码上加一个全新的功能模块。该功能模块主要功能都靠通信完成。因此想到了直接使用iframe嵌入祖传项目。新模块使用的是vue全家桶，本文内容主要涉及到iframe与祖传代码的通信与数据共享的一些问题总结。 postMessage是什么 正确使用window.postMessage() 方法可以安全地实现跨源通信。通常一个窗口可以获得对另一个窗口的引用（比如 targetWindow =window.opener），然后在窗口上调用 targetWindow.postMessage.
两个跨域页面通信（iframe） (postMessage)
pig_ning的博客
11-22 347
两个跨域页面通信（iframe） (postMessage)
报错HyShipTruck.vue:17 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('http://example.com') does not match the recipient window's origin
06-08
这个错误是由于目标窗口的源与发送消息的窗口的源不匹配导致的。在使用 `postMessage` 方法时，需要确保目标窗口的源与当前窗口的源是一致的。也就是说，你需要将 `http://example.com` 替换为目标 iframe 窗口的源，例如 `http://localhost:8080`。 在你的代码中，你可以这样修改： ```javascript const iframe = document.querySelector('iframe'); iframe.contentWindow.postMessage('Hello, World!', 'http://localhost:8080'); ``` 这里假设你的 iframe 所在的页面的源为 `http://localhost:8080`，如果不是，请将其替换为相应的源。 同时，你需要在嵌入的网页中监听 `message` 事件，并校验消息的来源，如下所示： ```javascript window.addEventListener('message', event => { if (event.origin !== 'http://localhost:8080') return; console.log(event.data); // 'Hello, World!' }); ``` 同样，这里的 `http://localhost:8080` 也需要替换为发送消息的窗口的源。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值