解决:Uncaught DOMException: Blocked a frame with origin “xxx“ from accessing a cross-origin frame.
同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。如果两个 URL 的protocol、port(如果有指定的话)和host都相同的话,则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”,或者直接是“元组”。(“元组” 是指一组项目构成的整体,双重/三重/四重/五重/等的通用形式
丑话说在前头:觉得我写的不错,记得点赞+收藏+分享,觉得我写得不行,欢迎留言!
最近在写一个项目:需要在页面使用iframe来播放老大写好的动画播放器,突然报这种错误:
![]()
老大说:这错误太明显了,就是跨域问题。
原来,浏览器地址是https://www.xxx.com,但是在iframe中,src属性值为https://xxx.com,我将src属性值改为https://www.xxx.com,问题就解决了!
“iframe跨域”可能造成无法与父页面通信,无法修改iframe元素样式等问题。
既然被老大质疑我对“跨域”的知识了解多少,那我们就来简单复习一下吧!
讲到跨域,我们应该首先了解“同源策略”。
“同源策略是一个重要的安全策略,它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档,减少可能被攻击的媒介。
如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话,则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”,或者直接是 “元组”。(“元组” 是指一组项目构成的整体,双重/三重/四重/五重/等的通用形式)。”

以上内容摘自“MDN:同源策略”
不符合"同源策略"规则的场景,即为“跨域”,跨域的解决方案在上面的链接中有提到,自行查阅!
又水了一篇文章,记得点赞+收藏+分享,或者留言,谢谢!
「智能机器人开发者大赛」官方平台,致力于为开发者和参赛选手提供赛事技术指导、行业标准解读及团队实战案例解析;聚焦智能机器人开发全栈技术闭环,助力开发者攻克技术瓶颈,促进软硬件集成、场景应用及商业化落地的深度研讨。 加入智能机器人开发者社区iRobot Developer,与全球极客并肩突破技术边界,定义机器人开发的未来范式!
更多推荐



所有评论(0)