目录
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>
假设画面地址为
注意点：
第三方系统的画面地址只需要将/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：为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的方式比较方便