邢台建网站,Wordpress收费下载会员,HTML建网站,网站开发采用了哪些技术怎么写iframe嵌入父子页面token问题
背景介绍
最近在做在平台A中嵌入平台B某个页面的需求#xff0c;我负责的是平台B这边#xff0c;使这个页面被嵌入后能正常使用。两个平台都实现了单点登录。 其实这是第二次做这个功能了#xff0c;原本以为会很顺利#xff0c;但没想到折腾…iframe嵌入父子页面token问题
背景介绍
最近在做在平台A中嵌入平台B某个页面的需求我负责的是平台B这边使这个页面被嵌入后能正常使用。两个平台都实现了单点登录。 其实这是第二次做这个功能了原本以为会很顺利但没想到折腾了我两天……在此记录一下。
嵌入逻辑
平台A中用iframe标签添加平台B某个页面的地址平台B的这个页面不能再有layout布局否则在平台A上会出现B的导航菜单而非单独的内容块。我的做法是给B页面新增路由 {path: /newPage,name: newPage,hidden: true,component: () import(/views/newPage),// 如果需要参数可以这样加上// props: route ({// params: route.query.params//})},问题1获取不到token
平台A和B各自没问题但是在A里访问B的页面就提示获取不到token。 然后就开始调单点登录鉴权的接口控制台报错
Refused to display https://xxx.com/ in a frame because it set X-Frame-Options to deny.网络请求过程如下
解决思路
为什么没有token了有了不就不会进入单点登录了吗单点登录服务的’X-Frame-Options’ 设置为 deny’改掉 由于单点登录是其他团队维护的修改起来牵扯太多所以只能朝思路努力。 那么问题就变成了为什么会没有token了呢
问题token怎么没了
平台登录后明明保存了token平台内页面跳转就有token跳转到另一个平台的页面时怎么就没了 分析到这我已经逐渐接近真相了。 token是从cookie里取的从上面的网络请求图中可以看到请求新页面时request headers里并没有cookie那自然也就无法获取token了。
知识点 浏览器出于安全考虑有个同源策略对于不同源的请求cookie不会被携带。 终极解决
本地调试时平台和平台分别是用IP访问的自然是不同源了。 所以接下来就是想办法让这俩平台同源比如设法通过域名访问。 使用SwitchHosts之类的虚拟域名工具将两个IP分别映射为域名三级域名要相同。 例如xx.abc.com 和 xx.abc.com有端口也行。
至此问题解决
