iframe嵌入踩坑记录

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'.

网络请求过程如下：

解决思路：

1. 为什么没有token了？有了不就不会进入单点登录了吗
2. 单点登录服务的’X-Frame-Options’ 设置为 'deny’改掉
   由于单点登录是其他团队维护的，修改起来牵扯太多，所以只能朝思路１努力。
   那么问题就变成了，为什么会没有token了呢？

问题２：token怎么没了

平台登录后明明保存了token，平台内页面跳转就有token，跳转到另一个平台的页面时怎么就没了？
分析到这我已经逐渐接近真相了。
token是从cookie里取的，从上面的网络请求图中可以看到，请求新页面时request headers里并没有cookie，那自然也就无法获取token了。

知识点：

浏览器出于安全考虑，有个同源策略，对于不同源的请求，cookie不会被携带。

终极解决

本地调试时，平台Ａ和平台Ｂ分别是用IP访问的，自然是不同源了。
所以接下来就是想办法让这俩平台同源，比如设法通过域名访问。
使用SwitchHosts之类的虚拟域名工具，将两个IP分别映射为域名，三级域名要相同。
例如xx.abc.com 和 xx.abc.com，有端口也行。

至此，问题解决！！！！！！！！