陕西网站建设多少钱2022最近比较火的营销事件
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，有端口也行。
至此，问题解决！！！！！！！！
