解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame

简介: 解决 Blocked a frame with origin “xxx“ from accessing a cross-origin frame
  • 内嵌 iframe 页面,一般使用 window.parentwindow.top 来获取父页面的 window 对象
  • 在子页面 想使用(或传递给) 父页面的参数,但是原因两个的域名不一样,所以会出现跨域问题。
  • 解决办法
    1、父页面监听 message,写法固定
window.addEventListener('message', function (e) {
  console.log(e)
})
  • 2、子页面发送 message 消息,并附带参数
// window.parent 是 iframe 子页面获取父页面的 window 对象
// 后面的 * 号就是处理跨域问题的,任何域名都不会出现跨域问题
window.parent.postMessage("需要传递的参数", '*')
// 也可以指定传送域名地址,这个域名不会出现跨域问题,写父页面(接收)域名地址
window.parent.postMessage("需要传递的参数", 'http://0.0.0.0:8080')
相关文章
|
JavaScript 前端开发
VUE组件:如何在Vue中实现组件的动态引入?
VUE组件:如何在Vue中实现组件的动态引入?
2564 0
|
JavaScript
Vue Antdv 列表(table、list)自定义空数据状态UI
Vue Antdv 列表(table、list)自定义空数据状态UI
1286 0
iOS- 关于AVAudioSession的使用——后台播放音乐
iOS- 关于AVAudioSession的使用——后台播放音乐
767 0
iOS- 关于AVAudioSession的使用——后台播放音乐
|
9月前
|
人工智能 前端开发 JavaScript
webpack-dev-server代理后端一直报CORS跨域或500错误
在Vue项目中使用Webpack的devServer代理后端接口时,遇到500错误。问题根源在于浏览器请求中携带的Origin头导致服务器报错,而Postman测试正常。通过分析发现,调整或移除Origin头可解决问题。解决办法包括:1) 在代理配置中添加正确的Origin头;2) 删除请求中的Origin头。文章还深入解析了Origin头的作用及changeOrigin配置的实际意义,并附带相关文档链接,帮助开发者更好地理解与解决类似跨域问题。
690 20
|
9月前
|
自然语言处理 前端开发 JavaScript
🔥3.4K star!阿里出品对话式UI神器,轻松打造专业级聊天界面!
ChatUI 是阿里巴巴团队开源的对话式 UI 设计语言与 React 组件库,专为构建智能对话界面而生。它凝聚了阿里在智能客服领域的最佳实践,提供“最新、最全、最优质”的开源项目和高效工作学习方法。核心功能亮点包括智能消息流处理、无障碍访问认证、企业级主题定制、多端自适应布局、国际化双引擎和智能输入辅助。技术架构基于 React 17 + TypeScript 4,支持 Less + CSS Variables 样式方案,Rollup + Babel 构建工具,以及 Jest + React Testing Library 测试体系。
2428 5
em/px/rem/vh/vw区别
【10月更文挑战第24天】理解和掌握 em、px、rem、vh、vw 这几种单位的特点和应用,能够帮助我们更好地进行网页设计和布局,实现更优秀的用户体验和适应不同屏幕尺寸的能力。
|
Java Maven 容器
Maven使用IDEA自带工具打包,同时将lib下的jar包打入,双击jar包可直接运行
使用IntelliJ IDEA的Artifacts功能,可以将项目依赖的第三方jar包打包进jar文件中,实现双击jar包即可直接运行。
Maven使用IDEA自带工具打包,同时将lib下的jar包打入,双击jar包可直接运行
|
容器
echarts的grid——图表的位置配置
echarts的grid——图表的位置配置
2729 1
|
存储 负载均衡 NoSQL
Tomcat 9.X(9.0.74)集群实现Session共享(基于redisson)
本文主要介绍了tomcat集群环境下基于redis+Redisson实现session共享,分享给大家,供广大从业者学习和参考。
13248 4

热门文章

最新文章