【HTTPS、HTTP】网易新闻首页https跨协议调用http的问题

今天在上班的时候，朋友忽然给我发消息让看下网易新闻的首页，于是我打开百度，输入“网易新闻”，然后点开了百度推荐的第一条：

网页排版是乱的，这种问题一看就是CSS文件没加载出来。

朋友：你说，这是网络原因还是他们（网易）网站出问题了？

我：一般出现这种情况，要么是本地浏览器缺少加载CSS的插件，要么就是网站有问题。本机访问新浪新闻正常显示，说明我浏览器没有问题。

朋友“查看源代码能找到CSS文件啊。

我：能找到CSS文件 但是不一定CSS文件被正确加载了。

以为是朋友在网易新闻的首页上加了脚本导致显示出错，于是就建议他先进行版本回退，然后去排查添加的脚本。结果朋友说是他在看新闻的时候发现的问题。

朋友：只有首页的错乱，点别的打开都是正常的。网页上有不安全的脚本，浏览器阻止加载。。想不到这么大的网站，还存在未被验证的脚本。地址输入栏，右边那个警告，点加载 就行了 。。。。

我按照朋友的说法操作后，首页果然正常加载：

朋友：为啥子浏览器会阻止哎？

朋友的这个问题引发了我的重视，我注意到浏览器地址栏的头是HTTPS，于是警觉：看来问题就出在这个HTTPS协议头上。

直接在浏览器地址栏输入http://news.163.com网页正常访问，但是从百度推荐里面点进去排版错乱。不知道大家有没有仔细查看我开始给出的百度推荐点进去的浏览器地址栏：https://news.163.com

再加上，异常页面的报错信息：This request has been blocked; the content must be served over HTTPS。最终问题得到准确定位。

好嘛，果然是HTTPS的问题。

总结一下：

问题描述：
网易新闻门户里面的CSS和JS等资源是基于http协议的，我们手动以http协议头去访问没有问题。但是百度推荐里面给出的默认访问地址是以HTTPS协议头去访问，当我们点进去的时候，服务器接收到HTTPS的请求，但是页面上的资源是基于http协议的，所以这些CSS和JS等资源就不能被正常加载，导致我们看到排版错乱。

问题原因：
HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。这是因为浏览器为了安全，HTTPS下不能跨协议直接调用http。

问题解决：
参照https://segmentfault.com/q/1010000005872734得到一种最简单的解决办法：对于同时支持HTTPS和HTTP的资源，引用的时候要把引用资源的URL里的协议头去掉，浏览器会自动根据当前是HTTPS还是HTTP来给资源URL补上协议头的，可以达到无缝切换。

好的，接下来，在浏览器中输入news.163.com，网页正常访问。

但是在实际的生产应用中，问题往往不会这么简单，那么如何进行跨协议调用呢，请参看我接下来的文章。