解决：Uncaught DOMException: Blocked a frame with origin “xxx“ from accessing a cross-origin frame.

丑话说在前头：觉得我写的不错，记得点赞+收藏+分享，觉得我写得不行，欢迎留言！

最近在写一个项目：需要在页面使用iframe来播放老大写好的动画播放器，突然报这种错误：

老大说：这错误太明显了，就是跨域问题。

原来，浏览器地址是https://www.xxx.com，但是在iframe中，src属性值为https://xxx.com，我将src属性值改为https://www.xxx.com，问题就解决了！

“iframe跨域”可能造成无法与父页面通信，无法修改iframe元素样式等问题。

既然被老大质疑我对“跨域”的知识了解多少，那我们就来简单复习一下吧！

讲到跨域，我们应该首先了解“同源策略”。

“同源策略是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

如果两个 URL 的 protocol、port (如果有指定的话)和 host 都相同的话，则这两个 URL 是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是 “元组”。（“元组” 是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。”

以上内容摘自“MDN：同源策略”

不符合"同源策略"规则的场景，即为“跨域”，跨域的解决方案在上面的链接中有提到，自行查阅！

又水了一篇文章，记得点赞+收藏+分享，或者留言，谢谢！