分享 4个解决 https页面加载http资源报错的方法

前端达人

共 1262字,需浏览 3分钟

 ·

2021-12-29 06:05

改https初看起来,其实就是一个域名指向的问题,也许咱们只要将http的请求,直接跳转到https地址去,那么也就完成了https的切换。实际并非这么简单的。
由于https地址中,若是加载了http资源,浏览器将认为这是不安全的资源,将会默认阻止,这就会给你带来资源不全的问题了,好比:图片显示不了,样式加载不了,js加载不了。
由于样式类,基本上都是写在本地的,因此通常还能够,可是一些公共的js文件,每每就是存在于cdn或者其余服务器上,这时候,若是访问不了,可能就致使了业务就彻底操做不了。好比:jquery效法加载失败,可能全部的操做、请求都将无效了。
如果一个https网站中的某个页面内容加载时请求了有js、css、图片和接口四个http协议的资源。就会出现报错信息:
module.exports = Config[Fix];Mixed Content: The page at 'https://www.fly63.com/***/' was loaded over HTTPS,but requested an insecure image 'http://www.fly63.co/***/img.jpg'.This content should also be served over HTTPS.

这是由于HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错。

下面总汇几种解决方案,供大家参考。

方法1:服务端设置header

好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难,在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案,他的作用就是让浏览器自动升级请求。
在我们服务器的响应头中加入:(当然如果操作不了服务器,下面还会介绍另一种解决办法)。

header("Content-Security-Policy: upgrade-insecure-requests");

方法2:页面设置meta头

在页面中加入 meta 头:(我使用这个方法)

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

如果页面比较多,需要统一改变的话,我们可以将这条语句添加到全局JS文件里,全局调用。

方法三:删除链接中的http:

推荐方法,不指定具体协议,使用资源协议自适配,比如,当前为https页面,那么就是https资源,如果是http页面,那么就是http资源。具体方法超简单:

<script src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js'>script>

方式四:

最笨的方法,直接复制原有代码,写成两套代码,一套为http使用,一套为https使用,http和https各自指向各自服务。


学习更多技能

请点击下方公众号

浏览 56
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报