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

点击上方前端Q，关注公众号

回复加群，加入前端Q技术交流群

改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各自指向各自服务。

往期推荐

大厂面试官：我理想中的前端

对话Svelte未来，Rust 编译器？构建大型应用?

收藏！史上最全 Vue 前端代码风格指南

最后

欢迎加我微信，拉你进技术群，长期交流学习...
欢迎关注「前端Q」,认真学前端，做个专业的技术人...

点个在看支持我吧