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

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

老大说:这错误太明显了,就是跨域问题

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

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

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

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


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

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

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


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

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

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐