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'.
网络请求过程如下:

解决思路:
- 为什么没有token了?有了不就不会进入单点登录了吗
- 单点登录服务的’X-Frame-Options’ 设置为 'deny’改掉
由于单点登录是其他团队维护的,修改起来牵扯太多,所以只能朝思路1努力。
那么问题就变成了,为什么会没有token了呢?
问题2:token怎么没了
平台登录后明明保存了token,平台内页面跳转就有token,跳转到另一个平台的页面时怎么就没了?
分析到这我已经逐渐接近真相了。
token是从cookie里取的,从上面的网络请求图中可以看到,请求新页面时request headers里并没有cookie,那自然也就无法获取token了。
知识点:
浏览器出于安全考虑,有个同源策略,对于不同源的请求,cookie不会被携带。
终极解决
本地调试时,平台A和平台B分别是用IP访问的,自然是不同源了。
所以接下来就是想办法让这俩平台同源,比如设法通过域名访问。
使用SwitchHosts之类的虚拟域名工具,将两个IP分别映射为域名,三级域名要相同。
例如xx.abc.com 和 xx.abc.com,有端口也行。
至此,问题解决!!!!!!!!

相关文章:
iframe嵌入踩坑记录
iframe嵌入父子页面token问题 背景介绍 最近在做在平台A中嵌入平台B某个页面的需求,我负责的是平台B这边,使这个页面被嵌入后能正常使用。两个平台都实现了单点登录。 其实这是第二次做这个功能了,原本以为会很顺利,但没想到折腾…...
面试小札:Java的类加载过程和类加载机制。
Java类加载过程 加载(Loading) 这是类加载过程的第一个阶段。在这个阶段,Java虚拟机(JVM)主要完成三件事: 通过类的全限定名来获取定义此类的二进制字节流。这可以从多种来源获取,如本地文件系…...
Spring 上下文对象
1. Spring 上下文对象概述 Spring 上下文对象(ApplicationContext)是 Spring 框架的核心接口之一,它扩展了 BeanFactory 接口,提供了更多企业级应用所需的功能。ApplicationContext 不仅可以管理 Bean 的生命周期和配置࿰…...
Wireshark抓取HTTPS流量技巧
一、工具准备 首先安装wireshark工具,官方链接:Wireshark Go Deep 二、环境变量配置 TLS 加密的核心是会话密钥。这些密钥由客户端和服务器协商生成,用于对通信流量进行对称加密。如果能通过 SSL/TLS 日志文件(例如包含密钥的…...
测试人员--如何区分前端BUG和后端BUG
在软件测试中,发现一个BUG并不算难,但准确定位它的来源却常常让测试人员头疼。是前端页面的问题?还是后台服务的异常?如果搞错了方向,开发人员之间的沟通效率会大大降低,甚至导致问题久拖不决。 那么&#…...
【Vue】指令扩充(指令修饰符、样式绑定)
目录 指令修饰符 按键修饰符 事件修饰符 双向绑定指令修饰符 输入框 表单域 下拉框 单选按钮 复选框 样式绑定 分类 绑定class 绑定style tab页切换示例 指令修饰符 作用 借助指令修饰符,可以让指令的功能更强大 分类 按键修饰符:用来…...
Ubuntu20.04 Rk3588 交叉编译ffmpeg7.0
firefly 公司出的rk3588的设备,其中已经安装了gcc 交叉编译工具,系统版本是Ubuntu20.04。 使用Ubuntu20.04 交叉编译ffmpeg_ubuntu下配置ffmpeg交叉编译器为arm-linux-gnueabihf-gcc-CSDN博客文章浏览阅读541次。ubuntu20.04 交叉编译ffmpeg_ubuntu下配…...
HTML常用表格与标签
一、table表格标签: <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><title>Title</title> </head> <body> <!--有大小为1的边框--> <table border"1">…...
网络安全与加密
1.Base64简单说明描述:Base64可以成为密码学的基石,非常重要。特点:可以将任意的二进制数据进行Base64编码结果:所有的数据都能被编码为并只用65个字符就能表示的文本文件。65字符:A~Z a~z 0~9 / 对文件进行base64编码…...
MySQL数据库-索引的介绍和使用
目录 MySQL数据库-索引1.索引介绍2.索引分类3.创建索引3.1 唯一索引3.2 普通索引3.3 组合索引3.4 全文索引 4.索引使用5.查看索引6.删除索引7.索引总结7.1 优点7.2 缺点7.3 索引使用注意事项 MySQL数据库-索引 数据库是用来存储数据,在互联网应用中,数据…...
【图像去噪】论文精读:Pre-Trained Image Processing Transformer(IPT)
请先看【专栏介绍文章】:【图像去噪(Image Denoising)】关于【图像去噪】专栏的相关说明,包含适配人群、专栏简介、专栏亮点、阅读方法、定价理由、品质承诺、关于更新、去噪概述、文章目录、资料汇总、问题汇总(更新中) 文章目录 前言Abstract1. Introduction2. Related…...
Java SE 与 Java EE:基础与进阶的探索之旅
在编程世界中,Java语言以其跨平台、面向对象、丰富的类库等特点,成为了众多开发者和企业的首选编程语言。而Java SE与Java EE,作为Java平台的两个重要组成部分,各自承载着不同的使命,同时又紧密相连,共同构…...
ssm旅游推荐系统的设计与开发
摘 要 旅游推荐系统是一个综合性的在线旅游推荐平台,旨在为用户提供便捷的旅游规划和预定服务。通过该系统,用户能够浏览各类景点信息并进行分类查找,同时获取详尽的景点介绍和相关照片,以辅助做出旅行决策。系统提供在线门票订购…...
【人工智能】用Python和NLP工具构建文本摘要模型:使用NLTK和spaCy进行自然语言处理
《Python OpenCV从菜鸟到高手》带你进入图像处理与计算机视觉的大门! 文本摘要是自然语言处理(NLP)中的关键任务之一,广泛应用于新闻、博客、社交媒体和搜索引擎等场景。通过生成简洁而准确的文本摘要,我们可以大大提升信息处理效率。本文将探讨如何使用Python结合NLP工具…...
51c大模型~合集76
我自己的原文哦~ https://blog.51cto.com/whaosoft/12617524 #诺奖得主哈萨比斯新作登Nature,AlphaQubit解码出更可靠量子计算机 谷歌「Alpha」家族又壮大了,这次瞄准了量子计算领域。 今天凌晨,新晋诺贝尔化学奖得主、DeepMind 创始人哈萨…...
资源控制器--laravel进阶篇
laravel的控制器当中有个资源控制器,这个比较好用。 创建资源控制器 php artisan make:controller PhotoController --resource 创建个路由来使用该资源控制器 use App\Http\Controllers\PhotoController; Route::resource(photos, PhotoController::class); 隐式模型绑定不…...
对象:是什么,使用,遍历对象,内置对象
对象使用: 对象访问:(对象每个属性之间用逗号隔开) 补充:也可以通过 对象名[‘属性名’] 对象方法: 方法名:匿名函数 调用方法不需要控制台打印,只要调用就自动输出值 遍历对象: …...
设计模式:4、命令模式(双重委托)
目录 0、定义 1、命令模式包括四种角色 2、命令模式的UML类图 3、代码示例 0、定义 将一个请求封装为一个对象,从而使用户可用不同的请求对客户进行参数化;对请求排队或记录请求日志,以及支持可撤销的操作。 1、命令模式包括四种角色 接…...
DataWorks快速入门
DataWorks基于MaxCompute、Hologres、EMR、AnalyticDB、CDP等大数据引擎,为数据仓库、数据湖、湖仓一体等解决方案提供统一的全链路大数据开发治理平台。本文以DataWorks的部分核心功能为例,指导您使用DataWorks接入数据并进行业务处理、周期调度以及数据…...
EasyExcel并行导出多个excel文件并压缩下载
EasyExcel并行导出多个excel文件并压缩下载 在SpringBoot应用中,采用同步方式导出Excel文件会导致服务器在生成文件期间阻塞,特别是在处理大量数据时,这种效率较低的方法会严重影响性能。为了解决这个问题,可以采用以下改进措施:首先将导出的数据进行拆分,然后利用Compl…...
MPNet:旋转机械轻量化故障诊断模型详解python代码复现
目录 一、问题背景与挑战 二、MPNet核心架构 2.1 多分支特征融合模块(MBFM) 2.2 残差注意力金字塔模块(RAPM) 2.2.1 空间金字塔注意力(SPA) 2.2.2 金字塔残差块(PRBlock) 2.3 分类器设计 三、关键技术突破 3.1 多尺度特征融合 3.2 轻量化设计策略 3.3 抗噪声…...
练习(含atoi的模拟实现,自定义类型等练习)
一、结构体大小的计算及位段 (结构体大小计算及位段 详解请看:自定义类型:结构体进阶-CSDN博客) 1.在32位系统环境,编译选项为4字节对齐,那么sizeof(A)和sizeof(B)是多少? #pragma pack(4)st…...
SCAU期末笔记 - 数据分析与数据挖掘题库解析
这门怎么题库答案不全啊日 来简单学一下子来 一、选择题(可多选) 将原始数据进行集成、变换、维度规约、数值规约是在以下哪个步骤的任务?(C) A. 频繁模式挖掘 B.分类和预测 C.数据预处理 D.数据流挖掘 A. 频繁模式挖掘:专注于发现数据中…...
【Redis技术进阶之路】「原理分析系列开篇」分析客户端和服务端网络诵信交互实现(服务端执行命令请求的过程 - 初始化服务器)
服务端执行命令请求的过程 【专栏简介】【技术大纲】【专栏目标】【目标人群】1. Redis爱好者与社区成员2. 后端开发和系统架构师3. 计算机专业的本科生及研究生 初始化服务器1. 初始化服务器状态结构初始化RedisServer变量 2. 加载相关系统配置和用户配置参数定制化配置参数案…...
汽车生产虚拟实训中的技能提升与生产优化
在制造业蓬勃发展的大背景下,虚拟教学实训宛如一颗璀璨的新星,正发挥着不可或缺且日益凸显的关键作用,源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例,汽车生产线上各类…...
Auto-Coder使用GPT-4o完成:在用TabPFN这个模型构建一个预测未来3天涨跌的分类任务
通过akshare库,获取股票数据,并生成TabPFN这个模型 可以识别、处理的格式,写一个完整的预处理示例,并构建一个预测未来 3 天股价涨跌的分类任务 用TabPFN这个模型构建一个预测未来 3 天股价涨跌的分类任务,进行预测并输…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接:344. 反转字符串 双指针法,两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...
12.找到字符串中所有字母异位词
🧠 题目解析 题目描述: 给定两个字符串 s 和 p,找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义: 若两个字符串包含的字符种类和出现次数完全相同,顺序无所谓,则互为…...
AI编程--插件对比分析:CodeRider、GitHub Copilot及其他
AI编程插件对比分析:CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展,AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者,分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...
