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