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