当前位置: 首页 > news >正文

在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&#xff0c;在A系统中挂载B系统的http的画面&#xff0c;会报错如下&#xff1a; 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) 参数如下&#xff1a; tab:表名 compare:比较规则函数名 简略写法&#xff1a; a {1,2,3} table.sort(a,function(a,b) return a>b end) compare这个参数是一个函数&#xff0c;它有两个参数&#xff0c;你可以理解为表中的两个不同元素&…...

数组与指针声明小问题

1、int *p &a; 是 C 语言中的一条语句&#xff0c;它涉及指针的声明和初始化。让我们逐步解释这一行代码的含义&#xff1a; int *p&#xff1a;这是一个指针声明。它声明了一个名为 p 的变量&#xff0c;该变量是一个指向 int 类型数据的指针。 &a&#xff1a;这是取…...

【Java】手把手学会数组的使用

数组的基本用法 创建数组 基本语法&#xff1a; // 动态初始化 数据类型 [] 数组名称 new 数据类型 [] { 初始化数据 }; // 静态初始化 数据类型 [] 数组名称 { 初始化数据 }; 代码示例&#xff1a; int[] array1 {1,2,3,4,5};int[] array2 new int[]…...

音视频开发9 FFmpeg 解复用框架--如何将一个影音文件(mp4文件/wav文件) 最终播放起来

一&#xff0c;播放器框架 二 常用音视频术语 容器&#xff0f;文件&#xff08;Conainer/File&#xff09;&#xff1a; 即特定格式的多媒体文件&#xff0c; 比如mp4、flv、mkv等。 媒体流&#xff08;Stream&#xff09;&#xff1a; 表示时间轴上的一段连续数据&#xff0…...

vue实现页面渲染时候执行某需求

1. 前言 在之前的项目中&#xff0c;需要实现一个监控token是否过期从而动态刷新token的功能&#xff0c;然而在登录成功后创建的监控器会在浏览器刷新点击或者是通过导航栏输入网址时销毁... 2. 试错 前前后后始过很多方法&#xff0c;在这里就记录一下也许也能为各位读者排…...

Python小游戏——俄罗斯方块

文章目录 项目介绍环境配置代码设计思路1.初始化和导入库&#xff1a;2.定义颜色和屏幕尺寸&#xff1a;3.定义游戏逻辑&#xff1a;4.游戏循环&#xff1a; 源代码效果图 项目介绍 俄罗斯方块游戏是一款经典的益智游戏&#xff0c;玩家通过旋转和移动各种形状的方块&#xff…...

Moto和Inter字节序

inter: 低地址按照start_bit位放低字节依次往高字节填充 MotoLsb: 低地址按照start_bit位放高字节&#xff0c;依次往低字节填充MotoMsb&#xff1a;高字节按照start_bit位放低地址&#xff0c;依次往高字节填充...

外汇天眼:野村证券和Laser Digital与GMO互联网集团合作发行日元和美元稳定币

野村控股和Laser Digital将与GMO互联网集团合作&#xff0c;在日本探索发行日元和美元稳定币。GMO互联网集团的美国子公司GMO-Z.com Trust Company, Inc. 在纽约州金融服务部的监管框架下&#xff0c;在以太坊、恒星币和Solana等主要区块链上发行稳定币。GMO-Z.com Trust Compa…...

Python怎么使用getattr?

getattr() 是 Python 的内置函数&#xff0c;用于获取对象的属性值。它接受三个参数&#xff1a;对象、属性名称以及一个可选的默认值。如果对象具有指定的属性&#xff0c;getattr() 会返回该属性的值&#xff1b;如果对象没有该属性&#xff0c;并且提供了默认值&#xff0c;…...

[算法] 优先算法(三):滑动窗口(上)

&#x1f338;个人主页:https://blog.csdn.net/2301_80050796?spm1000.2115.3001.5343 &#x1f3f5;️热门专栏:&#x1f355; Collection与数据结构 (92平均质量分)https://blog.csdn.net/2301_80050796/category_12621348.html?spm1001.2014.3001.5482 &#x1f9c0;Java …...

[蓝桥杯 2020 省 A1] 超级胶水

一.题目 题目描述 小明有 n 颗石子&#xff0c;按顺序摆成一排。 他准备用胶水将这些石子粘在一起。 每颗石子有自己的重量&#xff0c;如果将两颗石子粘在一起&#xff0c;将合并成一颗新的石子&#xff0c;重量是这两颗石子的重量之和。 为了保证石子粘贴牢固&#xff0…...

读书笔记分享

1.苏格拉底只在需要的时候才索取&#xff0c;那样便能以最少的物质满足自身的要求。他认为每个人都天生体质脆弱&#xff0c;只有在贫乏的环境中才会锻炼地强壮起来。生活中的大多数人认为&#xff0c;奢华才是幸福的生活。无休止的物质积聚&#xff0c;让人们每天生活在一个内…...

考试宝典——软件过程与管理重点知识总结

概论 软件工程三要素 过程方法工具 软件过程的定义 软件过程是用于软件开发及维护的一系列活动、方法及实践。 常见软件过程分类&#xff08;五大类&#xff09; 客户-供应商过程&#xff1a;内部直接影响到客户、外部直接影响开发、向客户交付软件以及软件正确操作与使用的过…...

穿越时空的工厂之旅:探索可视化三维场景的奥秘

在科技日新月异的今天&#xff0c;我们似乎总是在不断追求着更加高效、智能的生产方式。 传统的工厂管理方式往往依赖于平面图纸、纸质文档和现场巡查&#xff0c;这不仅效率低下&#xff0c;而且容易出错。而三维可视化技术通过3D建模和虚拟现实技术&#xff0c;将工厂内部的各…...

2024年推荐的适合电脑和手机操作的线上兼职副业平台

总是会有人在找寻着线上兼职副业&#xff0c;那么在如今的2024年&#xff0c;互联网提供了诸多方便&#xff0c;无论你是宝妈、大学生、程序员、外卖小哥还是打工族&#xff0c;如果你正在寻找副业机会&#xff0c;那么这篇文章将为你提供一些适合电脑和手机操作的线上兼职副业…...

传感器的静态特性

传感器的静态特性是指传感器在稳态&#xff08;输入量为常量或变化极慢时&#xff09;输入信号作用下&#xff0c;传感器输出与输入信号之间的关系。这种关系一般用曲线、数学表达式或表格来表示。传感器的静态特性是传感器的基本特性之一&#xff0c;其描述了传感器在不考虑迟…...

如果jupyter notebook不能实现网页自动跳转,参考下面的链接

一招搞定Jupyter-notebook命令行打开之后不能自动跳转浏览器_一招搞定jupter notebook命令行打开之后-CSDN博客...

顺序表实现通讯录项目

目录 一.实现功能&#xff1a; 二.文件结构 三.代码实现 1.初始化 2.通讯录的销毁 3.通讯录添加数据 4.通讯录删除数据 5.通讯录的修改 6.展现通讯录数据 7.通讯录查找 四.代码 SeqList.h Contact.h Contact.c test(通讯录).c 一.实现功能&#xff1a; ⾄少能够存…...

连锁超市冷库节能解决方案:如何实现超市降本增效

在连锁超市冷库运营中&#xff0c;高能耗、设备损耗快、人工管理低效等问题长期困扰企业。御控冷库节能解决方案通过智能控制化霜、按需化霜、实时监控、故障诊断、自动预警、远程控制开关六大核心技术&#xff0c;实现年省电费15%-60%&#xff0c;且不改动原有装备、安装快捷、…...

剑指offer20_链表中环的入口节点

链表中环的入口节点 给定一个链表&#xff0c;若其中包含环&#xff0c;则输出环的入口节点。 若其中不包含环&#xff0c;则输出null。 数据范围 节点 val 值取值范围 [ 1 , 1000 ] [1,1000] [1,1000]。 节点 val 值各不相同。 链表长度 [ 0 , 500 ] [0,500] [0,500]。 …...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...

Unit 1 深度强化学习简介

Deep RL Course ——Unit 1 Introduction 从理论和实践层面深入学习深度强化学习。学会使用知名的深度强化学习库&#xff0c;例如 Stable Baselines3、RL Baselines3 Zoo、Sample Factory 和 CleanRL。在独特的环境中训练智能体&#xff0c;比如 SnowballFight、Huggy the Do…...

html css js网页制作成品——HTML+CSS榴莲商城网页设计(4页)附源码

目录 一、&#x1f468;‍&#x1f393;网站题目 二、✍️网站描述 三、&#x1f4da;网站介绍 四、&#x1f310;网站效果 五、&#x1fa93; 代码实现 &#x1f9f1;HTML 六、&#x1f947; 如何让学习不再盲目 七、&#x1f381;更多干货 一、&#x1f468;‍&#x1f…...

AirSim/Cosys-AirSim 游戏开发(四)外部固定位置监控相机

这个博客介绍了如何通过 settings.json 文件添加一个无人机外的 固定位置监控相机&#xff0c;因为在使用过程中发现 Airsim 对外部监控相机的描述模糊&#xff0c;而 Cosys-Airsim 在官方文档中没有提供外部监控相机设置&#xff0c;最后在源码示例中找到了&#xff0c;所以感…...

Python 实现 Web 静态服务器(HTTP 协议)

目录 一、在本地启动 HTTP 服务器1. Windows 下安装 node.js1&#xff09;下载安装包2&#xff09;配置环境变量3&#xff09;安装镜像4&#xff09;node.js 的常用命令 2. 安装 http-server 服务3. 使用 http-server 开启服务1&#xff09;使用 http-server2&#xff09;详解 …...

OD 算法题 B卷【正整数到Excel编号之间的转换】

文章目录 正整数到Excel编号之间的转换 正整数到Excel编号之间的转换 excel的列编号是这样的&#xff1a;a b c … z aa ab ac… az ba bb bc…yz za zb zc …zz aaa aab aac…; 分别代表以下的编号1 2 3 … 26 27 28 29… 52 53 54 55… 676 677 678 679 … 702 703 704 705;…...

破解路内监管盲区:免布线低位视频桩重塑停车管理新标准

城市路内停车管理常因行道树遮挡、高位设备盲区等问题&#xff0c;导致车牌识别率低、逃费率高&#xff0c;传统模式在复杂路段束手无策。免布线低位视频桩凭借超低视角部署与智能算法&#xff0c;正成为破局关键。该设备安装于车位侧方0.5-0.7米高度&#xff0c;直接规避树枝遮…...

Canal环境搭建并实现和ES数据同步

作者&#xff1a;田超凡 日期&#xff1a;2025年6月7日 Canal安装&#xff0c;启动端口11111、8082&#xff1a; 安装canal-deployer服务端&#xff1a; https://github.com/alibaba/canal/releases/1.1.7/canal.deployer-1.1.7.tar.gz cd /opt/homebrew/etc mkdir canal…...