https访问http加载不出图片资源的问题分析

问题:如果在 https 协议的页面中加载了 http 资源,浏览器将认为这是不安全的,会默认阻止,会带来资源不全的问题。就会导致图片无法显示,样式无法加载,JS 无法加载。如果页面关键资源均为 http 协议,所有的操作、请求都将无效。

解决办法:

1、直接复制位于http协议服务器上的静态资源到本地(多用于解决第三方的问题),重新创建一套https的资源,让http和https指向各自的服务器;

2、用同一套代码,由nginx代理转发http和https到相同的静态资源,这要求两个协议处于同一服务;

3、加载静态资源时,不直接指定协议,使用当前页面协议,如<script src="//cdn.com/jquery.js"></script>,会自动根据当前页面的协议进行资源加载;

4、在页面的head中加入meta标签<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">,其作用是将当前页面所有http协议地址升级为https进行请求,由于该方案仅替换协议部分,如果http和https不同协议下静态资源路径有变化,该方法无法使用;

5、iframe的地址是http协议的,如果他们拒绝升级,解决方案只有自己写一遍iframe页面到本地。

相关文章:

https网页加载http资源报错问题
https://www.cnblogs.com/frank-link/p/14599300.html

让浏览器不再显示 https 页面中的 http 请求警报
https://www.cnblogs.com/hustskyking/p/upgrade-insecure-requests.html

4种https页面加载http资源报错时的解决方案
https://mp.weixin.qq.com/s?__biz=MjM5MDA2MTI1MA==&mid=2649118766&idx=2&sn=bc072dc5d87c7acef2c32a4a674c8f15

Related Posts