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

很多网站会将静态资源(如图片、js 文件、CSS 文件等)放到 CDN 上，以减少服务器压力、优化客户体验。当我们将网站从 HTTP 升级为 HTTPS 时，有时候就会出现这种情况：图片、样式、JS 等静态资源加载不了了。这是因为当你在浏览器中输入的是 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各自指向各自服务。