前端面试场景分析-https中打开http的图片会发生什么

**

说一下我之前第一次面试中所遇到的问题吧

**
当时面试的是一家小公司，正好大三马上就转大四了想着找暑期实习先，为了在秋招中更有优势，面试是电话面的，面试官是一个年轻的小伙，态度蛮好的，上来进行自我介绍完了后就来了道网络分析题，https中打开http图片会发生什么？以及返过来会发生什么？
我们都知道https是严格加密传输，不允许调用http普通协议数据，其中包括js,css,以及图片等资源，所以当在https中打开http图片时会发生图片无法显示的问题，因为浏览器会认为这是一张不安全的图片，所以建议大家全部都使用https图片来显示。
下面总汇几种解决方案，供大家参考。

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