记一次iframe嵌套跨域页面的踩坑并解决:X-Frame-Options

1,526 阅读1分钟

iframe嵌套不同域名的网站,实现免登录访问

接到一个临时性的需求,需要在A系统嵌入B系统,两个系统域名不同,点击A系统中的菜单,通过iframe显示B系统。 做的过程中遇到了很多坑 第一个,iframe页面拒绝访问请求,控制台报错

image.png

image.png 这里的解决方法需要后端配置服务,参考这里:X-Frame-Options

第二个,能够正常访问页面后,又出现一个新的错误,iframe内不允许访问缓存相关:localStorage,sessionStorage,cookies

image.png 这里的解释是浏览器的安全机制,iframe页面内缓存相关的api无法操作,并报错中断程序执行。搜索良久,没有解决方案。 因为B项目中,缓存相关的代码比较少,主要是用来存token,因此,绕过了这个无法解决的问题,通过定义全局变量存token,缓存相关的api添加try{},避免报错。取token时先尝试取缓存中的,否则取全局变量中的。

image.png image.png

这种方法不是很可靠,毕竟是绕过了缓存机制,如果项目中有大量缓存相关的代码,不适用。