在https的系统中挂载其他http系统的画面的解决方案
目录
1.问题及说明
2.解决方案及示例
3.总结
1.问题及说明
A系统使用了https,在A系统中挂载B系统的http的画面,会报错如下:
Mixed Content: The page at 'https://beef.zz.com/front/#/biz/cultivationList/cultivationDetails/5dbf836751ba4b5d9e246ad44f013200' was loaded over HTTPS, but requested an insecure element 'http://www.aa.com/files/financialAppUpload/20201230/0403e240-95dc-4c91-a032-2262e396c411-20201230.jpg'. This request was automatically upgraded to HTTPS, For more information see https://blog.chromium.org/2019/10/no-more-mixed-messages-about-https.html
浏览器阻止混合内容的加载,页面的地址是通过 HTTPS 加载的,但是里面有不安全的内容(通过 HTTP 加载,被认为是不安全的),浏览器会在控制台报错,禁止在https系统中加载http的页面。
2.解决方案及示例
①修改浏览器的配置
例如在火狐浏览器中
打开新标签页,在地址栏输入 about:config,进入配置页面。
搜索 security.mixed_content.block_active_content,将true改为false。
重启浏览器后生效
修改后浏览器控制台会弹出警告,不会进行报错。
②将http升级为https
可以将http的系统升级为https
③使用nginx进行反向代理
前端:
前端通过在vue画面中嵌套iframe显示其他系统的http的画面
<template><div class="container"><Breadcrumb :items="['menu.desktop', 'menu.desktop.index']"/><a-card class="general-card" title="数据报表"><iframe class="no-border" :src="windowUrl" width="100%" height="1000"></iframe></a-card></div>
</template><script setup lang="ts">
// 组件引用
import { ref, reactive } from "vue";
import {getData} from "@/api/report";const windowUrl = ref("")
const getInfo = async () => {const res = await getData()const token = res.resBody.tokenconst url = res.resBody.url// popupWindow = window.open(url + "&token=" + token + "&sysFlag=123", "_self")windowUrl.value = url + "&token=" + token + "&sysFlag=123"}
getInfo()
</script>
<!--src/App.vue-->
<script lang="ts">
export default {name: 'Dashboard'};
</script><style scoped lang="less">
.container {padding: 0 20px 20px 20px;
}
.no-border {border: none;
}</style>
假设画面地址为
http://xxx.xxx.xxx:8082/ai/?proc=1&action=viewer&hback=true&db=!7814!603b!.db&platform=PC&browserType=chrome
注意点:
第三方系统的画面地址只需要将/ai/?proc=1&action=viewer&hback=true&db=!7814!603b!.db&platform=PC&browserType=chrome设置到iframe的src中,在vue的配置中添加了基础路径,基础路径为A系统的路径,请求到达nginx之后会将ai的请求转发到对应的页面的服务器中,其他本系统的带有api的请求则转发到本系统的后端服务器中,这样就避免了在https中直接加载https的画面。因为请求的地址会拼接上A系统的带有https的基础路径,整体请求会变为如下:
https://x.xx.com/ai/?proc=1&action=viewer&hback=true&db=!7814!!53d1603b!.db&platform=PC&browserType=chrome
https://x.xx.com:为A系统的基础路径
/ai/?proc=1&action=viewer&hback=true&db=!7814!!53d1603b!.db&platform=PC&browserType=chrome:为B系统的去掉域名后的地址
nginx配置:
将url中带有ai的请求转发到对应的服务器的对应端口中,这样就避免了在
#user nobody;
worker_processes 1;#error_log logs/error.log;
#error_log logs/error.log notice;
#error_log logs/error.log info;#pid logs/nginx.pid;events {worker_connections 1024;
}http {include mime.types;default_type application/octet-stream;#log_format main '$remote_addr - $remote_user [$time_local] "$request" '# '$status $body_bytes_sent "$http_referer" '# '"$http_user_agent" "$http_x_forwarded_for"';#access_log logs/access.log main;sendfile on;#tcp_nopush on;#keepalive_timeout 0;keepalive_timeout 65;#gzip on;server {listen 80 ;server_name localhost;underscores_in_headers on; #添加自定义请求头client_max_body_size 1G; #设置请求体大小location / {root /usr/share/nginx/html;try_files $uri $uri/ /index.html;index index.html index.htm;proxy_set_header X-Forwarded-Scheme $scheme;}location /api/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://xx.xx.xx.xx:8098/;}location /ai/ {proxy_set_header Host $host;proxy_set_header X-Real-IP $remote_addr;proxy_set_header REMOTE-HOST $remote_addr;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;proxy_pass http://xx.xx.xx.xx:8082;}location /img/ {alias /data/files/xx/;}}}
3.总结
一般使用nginx反向代理的方式,现在前端都需要部署在nginx上,所以使用nginx的方式比较方便
相关文章:
在https的系统中挂载其他http系统的画面的解决方案
目录 1.问题及说明 2.解决方案及示例 3.总结 1.问题及说明 A系统使用了https,在A系统中挂载B系统的http的画面,会报错如下: Mixed Content: The page at https://beef.zz.com/front/#/biz/cultivationList/cultivationDetails/5dbf836751…...
mysql存储比特位
一、介绍 二、SQL CREATE TABLE bits_table (id INT PRIMARY KEY AUTO_INCREMENT,bit_value BIGINT UNSIGNED );-- 插入一个 8 位的 BIT 值 INSERT INTO bits_table (bit_value) VALUES (B10101010);-- 查询并格式化输出 SELECT id,bit_value,CONCAT(b, LPAD(BIN(bit_value),…...
Lua中table.sort()使用方式
table.sort(tab,compare) 参数如下: tab:表名 compare:比较规则函数名 简略写法: a {1,2,3} table.sort(a,function(a,b) return a>b end) compare这个参数是一个函数,它有两个参数,你可以理解为表中的两个不同元素&…...
数组与指针声明小问题
1、int *p &a; 是 C 语言中的一条语句,它涉及指针的声明和初始化。让我们逐步解释这一行代码的含义: int *p:这是一个指针声明。它声明了一个名为 p 的变量,该变量是一个指向 int 类型数据的指针。 &a:这是取…...
【Java】手把手学会数组的使用
数组的基本用法 创建数组 基本语法: // 动态初始化 数据类型 [] 数组名称 new 数据类型 [] { 初始化数据 }; // 静态初始化 数据类型 [] 数组名称 { 初始化数据 }; 代码示例: int[] array1 {1,2,3,4,5};int[] array2 new int[]…...
音视频开发9 FFmpeg 解复用框架--如何将一个影音文件(mp4文件/wav文件) 最终播放起来
一,播放器框架 二 常用音视频术语 容器/文件(Conainer/File): 即特定格式的多媒体文件, 比如mp4、flv、mkv等。 媒体流(Stream): 表示时间轴上的一段连续数据࿰…...
vue实现页面渲染时候执行某需求
1. 前言 在之前的项目中,需要实现一个监控token是否过期从而动态刷新token的功能,然而在登录成功后创建的监控器会在浏览器刷新点击或者是通过导航栏输入网址时销毁... 2. 试错 前前后后始过很多方法,在这里就记录一下也许也能为各位读者排…...
Python小游戏——俄罗斯方块
文章目录 项目介绍环境配置代码设计思路1.初始化和导入库:2.定义颜色和屏幕尺寸:3.定义游戏逻辑:4.游戏循环: 源代码效果图 项目介绍 俄罗斯方块游戏是一款经典的益智游戏,玩家通过旋转和移动各种形状的方块ÿ…...
Moto和Inter字节序
inter: 低地址按照start_bit位放低字节依次往高字节填充 MotoLsb: 低地址按照start_bit位放高字节,依次往低字节填充MotoMsb:高字节按照start_bit位放低地址,依次往高字节填充...
外汇天眼:野村证券和Laser Digital与GMO互联网集团合作发行日元和美元稳定币
野村控股和Laser Digital将与GMO互联网集团合作,在日本探索发行日元和美元稳定币。GMO互联网集团的美国子公司GMO-Z.com Trust Company, Inc. 在纽约州金融服务部的监管框架下,在以太坊、恒星币和Solana等主要区块链上发行稳定币。GMO-Z.com Trust Compa…...
Python怎么使用getattr?
getattr() 是 Python 的内置函数,用于获取对象的属性值。它接受三个参数:对象、属性名称以及一个可选的默认值。如果对象具有指定的属性,getattr() 会返回该属性的值;如果对象没有该属性,并且提供了默认值,…...
[算法] 优先算法(三):滑动窗口(上)
🌸个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 🏵️热门专栏:🍕 Collection与数据结构 (92平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 🧀Java …...
[蓝桥杯 2020 省 A1] 超级胶水
一.题目 题目描述 小明有 n 颗石子,按顺序摆成一排。 他准备用胶水将这些石子粘在一起。 每颗石子有自己的重量,如果将两颗石子粘在一起,将合并成一颗新的石子,重量是这两颗石子的重量之和。 为了保证石子粘贴牢固࿰…...
读书笔记分享
1.苏格拉底只在需要的时候才索取,那样便能以最少的物质满足自身的要求。他认为每个人都天生体质脆弱,只有在贫乏的环境中才会锻炼地强壮起来。生活中的大多数人认为,奢华才是幸福的生活。无休止的物质积聚,让人们每天生活在一个内…...
考试宝典——软件过程与管理重点知识总结
概论 软件工程三要素 过程方法工具 软件过程的定义 软件过程是用于软件开发及维护的一系列活动、方法及实践。 常见软件过程分类(五大类) 客户-供应商过程:内部直接影响到客户、外部直接影响开发、向客户交付软件以及软件正确操作与使用的过…...
穿越时空的工厂之旅:探索可视化三维场景的奥秘
在科技日新月异的今天,我们似乎总是在不断追求着更加高效、智能的生产方式。 传统的工厂管理方式往往依赖于平面图纸、纸质文档和现场巡查,这不仅效率低下,而且容易出错。而三维可视化技术通过3D建模和虚拟现实技术,将工厂内部的各…...
2024年推荐的适合电脑和手机操作的线上兼职副业平台
总是会有人在找寻着线上兼职副业,那么在如今的2024年,互联网提供了诸多方便,无论你是宝妈、大学生、程序员、外卖小哥还是打工族,如果你正在寻找副业机会,那么这篇文章将为你提供一些适合电脑和手机操作的线上兼职副业…...
传感器的静态特性
传感器的静态特性是指传感器在稳态(输入量为常量或变化极慢时)输入信号作用下,传感器输出与输入信号之间的关系。这种关系一般用曲线、数学表达式或表格来表示。传感器的静态特性是传感器的基本特性之一,其描述了传感器在不考虑迟…...
如果jupyter notebook不能实现网页自动跳转,参考下面的链接
一招搞定Jupyter-notebook命令行打开之后不能自动跳转浏览器_一招搞定jupter notebook命令行打开之后-CSDN博客...
顺序表实现通讯录项目
目录 一.实现功能: 二.文件结构 三.代码实现 1.初始化 2.通讯录的销毁 3.通讯录添加数据 4.通讯录删除数据 5.通讯录的修改 6.展现通讯录数据 7.通讯录查找 四.代码 SeqList.h Contact.h Contact.c test(通讯录).c 一.实现功能: ⾄少能够存…...
C# SqlSugar:依赖注入与仓储模式实践
C# SqlSugar:依赖注入与仓储模式实践 在 C# 的应用开发中,数据库操作是必不可少的环节。为了让数据访问层更加简洁、高效且易于维护,许多开发者会选择成熟的 ORM(对象关系映射)框架,SqlSugar 就是其中备受…...
工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配
AI3D视觉的工业赋能者 迁移科技成立于2017年,作为行业领先的3D工业相机及视觉系统供应商,累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成,通过稳定、易用、高回报的AI3D视觉系统,为汽车、新能源、金属制造等行…...
Java入门学习详细版(一)
大家好,Java 学习是一个系统学习的过程,核心原则就是“理论 实践 坚持”,并且需循序渐进,不可过于着急,本篇文章推出的这份详细入门学习资料将带大家从零基础开始,逐步掌握 Java 的核心概念和编程技能。 …...
稳定币的深度剖析与展望
一、引言 在当今数字化浪潮席卷全球的时代,加密货币作为一种新兴的金融现象,正以前所未有的速度改变着我们对传统货币和金融体系的认知。然而,加密货币市场的高度波动性却成为了其广泛应用和普及的一大障碍。在这样的背景下,稳定…...
Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?
Redis 的发布订阅(Pub/Sub)模式与专业的 MQ(Message Queue)如 Kafka、RabbitMQ 进行比较,核心的权衡点在于:简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...
C++.OpenGL (20/64)混合(Blending)
混合(Blending) 透明效果核心原理 #mermaid-svg-SWG0UzVfJms7Sm3e {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-icon{fill:#552222;}#mermaid-svg-SWG0UzVfJms7Sm3e .error-text{fill…...
Go语言多线程问题
打印零与奇偶数(leetcode 1116) 方法1:使用互斥锁和条件变量 package mainimport ("fmt""sync" )type ZeroEvenOdd struct {n intzeroMutex sync.MutexevenMutex sync.MutexoddMutex sync.Mutexcurrent int…...
逻辑回归暴力训练预测金融欺诈
简述 「使用逻辑回归暴力预测金融欺诈,并不断增加特征维度持续测试」的做法,体现了一种逐步建模与迭代验证的实验思路,在金融欺诈检测中非常有价值,本文作为一篇回顾性记录了早年间公司给某行做反欺诈预测用到的技术和思路。百度…...
HubSpot推出与ChatGPT的深度集成引发兴奋与担忧
上周三,HubSpot宣布已构建与ChatGPT的深度集成,这一消息在HubSpot用户和营销技术观察者中引发了极大的兴奋,但同时也存在一些关于数据安全的担忧。 许多网络声音声称,这对SaaS应用程序和人工智能而言是一场范式转变。 但向任何技…...
保姆级【快数学会Android端“动画“】+ 实现补间动画和逐帧动画!!!
目录 补间动画 1.创建资源文件夹 2.设置文件夹类型 3.创建.xml文件 4.样式设计 5.动画设置 6.动画的实现 内容拓展 7.在原基础上继续添加.xml文件 8.xml代码编写 (1)rotate_anim (2)scale_anim (3)translate_anim 9.MainActivity.java代码汇总 10.效果展示 逐帧…...
