在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的方式比较方便