Blocked a frame with origin XXX from accessing a cross-origin 跨域问题解决方案

本文示例使用的

html
vue
ckeditor4

场景说明

项目是一个比较老的项目，需要使用ckeditor4来进行步骤填写，商议后使用jsp内iframe一个vue的html页面进行编写，但是在部署的环境下发生了iframe跨域问题，本文提供了一种解决思路。

解决方案

父级向iframe传值：

使用url取值方案，网上也有很多子集监听数值的方案，但是实际过程中往往第一次在子页面初始化时，是监听不到数据的，故采用url拼接传值方案，关键代码如下

//父级代码
<iframe id="aaa"  name="aaa" ></iframe>
var url =  "/ceshi.html?id="+111;
aaa.location=url;//子页面接受代码function getQueryString(name) {const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");const r = window.location.search.substr(1).match(reg);if (r != null) return decodeURI(r[2]);return null;
}const tempId = getQueryString('id');

iframe向父级传递信息：

我的场景是iframe是一个模态框，里面有关闭模态框的按钮，若点击按钮，需要传递给父级信息让模态框进行隐藏操作。

//iframe内传值代码const message = {"close": true};window.parent.postMessage(message, '*');//父级监听代码window.addEventListener('message', function (e) {//let target = e.target;let data = e.data;// console.log(data);if (e.data.close){//此处调用业务代码}
}, false);

Blocked a frame with origin XXX from accessing a cross-origin 跨域问题解决方案相关推荐

解决：Uncaught DOMException: Blocked a frame with origin “xxx“ from accessing a cross-origin frame.
丑话说在前头:觉得我写的不错,记得点赞+收藏+分享,觉得我写得不行,欢迎留言! 最近在写一个项目:需要在页面使用iframe来播放老大写好的动画播放器,突然报这种错误: 老大说:这错误太明显了,就是跨 ...
JS Uncaught DOMException: Blocked a frame with origin “XXX“ from accessing a cross-origin frame问题解决
问题描述: Uncaught DOMException: Blocked a frame with origin "http://localhost:46819" from acc ...
Blocked a frame with origin XXX from accessing a cross-origin 。iframe跨域问题
在前端开发的过程中,我们常常会用到iframe去在我们的页面中引用一个子页面,而父子页面又常常会有交互.在同域情况下,子页面如果想要访问父页面中的window对象中的方法的话,直接在当前页面中使用wi ...
前端小白必读之跨域问题：Access to XMLHttpRequest*from origin*has been blocked by CORS..Access-Control-Allow-O...
问题描述某小白是一个只略懂基础三件套和 Angular 框架的前端初学者,这天,小白开始尝试和后端服务器对接,控制台却打印出了如下错误信息: 小白看得一头雾水,ta 赶忙搜索与has been bl ...
Blocked a frame with origin “https://my.xxxxxxx.com“ from accessing a cross-origin frame.
最近在写一个项目:需要在页面使用iframe来做登陆功能,本想使用parent.window.location.reload();刷新页面的,最后报错了"Blocked a frame wi ...
iframe跨端口报错 Blocked a frame with origin from accessing a cross-origin frame
前言在不同的端口号,甚至是不同的ip进行iframe嵌套的时候,在父页面调用子页面的方法的时候,报错 SecurityError: Blocked a frame with origin f ...
iframe跨端口报错：Blocked a frame with origin
iframe跨端口报错简单解决方法报错信息 Uncaught DOMException: Blocked a frame with origin "https://www.XXX.com ...
页面跨域与iframe通信(Blocked a frame with origin)
项目中有个需求是在前后端分离的情况下,前台页面将后台页面加载在预留的iframe中:但是遇到了iframe和主窗口双滚动条的情况,由此引申出来了问题: 只保留单个滚动条,那么就要让iframe的高度自 ...
iframe 父页面全屏同时子页面 viewer轮播插件全屏放大 Uncaught DOMException: Blocked a frame with origin null from acce
1.在父页面<iframe allowfullscreen="true" ></iframe> 标签要加上 allowfullscreen="tr ...