广州做商城网站卖网站链接
目录
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的方式比较方便