无锡专业做网站公司,wordpress插件太大,室内设计培训课程,网站模板广告去除目录 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…目录 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的画面
templatediv classcontainerBreadcrumb :items[menu.desktop, menu.desktop.index]/a-card classgeneral-card title数据报表iframe classno-border :srcwindowUrl width100% height1000/iframe/a-card/div
/templatescript setup langts
// 组件引用
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 sysFlag123, _self)windowUrl.value url token token sysFlag123}
getInfo()
/script
!--src/App.vue--
script langts
export default {name: Dashboard};
/scriptstyle scoped langless
.container {padding: 0 20px 20px 20px;
}
.no-border {border: none;
}/style
假设画面地址为 http://xxx.xxx.xxx:8082/ai/?proc1actionviewerhbacktruedb!7814!603b!.dbplatformPCbrowserTypechrome
注意点
第三方系统的画面地址只需要将/ai/?proc1actionviewerhbacktruedb!7814!603b!.dbplatformPCbrowserTypechrome设置到iframe的src中在vue的配置中添加了基础路径基础路径为A系统的路径请求到达nginx之后会将ai的请求转发到对应的页面的服务器中其他本系统的带有api的请求则转发到本系统的后端服务器中这样就避免了在https中直接加载https的画面。因为请求的地址会拼接上A系统的带有https的基础路径整体请求会变为如下
https://x.xx.com/ai/?proc1actionviewerhbacktruedb!7814!!53d1603b!.dbplatformPCbrowserTypechrome
https://x.xx.com为A系统的基础路径
/ai/?proc1actionviewerhbacktruedb!7814!!53d1603b!.dbplatformPCbrowserTypechrome为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的方式比较方便
