今天在上班的時候，朋友忽然給我發(fā)消息讓看下網(wǎng)易新聞的首頁，于是我打開百度，輸入“網(wǎng)易新聞”，然后點開了百度推薦的第一條：

網(wǎng)頁排版是亂的，這種問題一看就是CSS文件沒加載出來。

朋友：你說，這是網(wǎng)絡原因還是他們（網(wǎng)易）網(wǎng)站出問題了？

我：一般出現(xiàn)這種情況，要么是本地瀏覽器缺少加載CSS的插件，要么就是網(wǎng)站有問題。本機訪問新浪新聞正常顯示，說明我瀏覽器沒有問題。

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

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

以為是朋友在網(wǎng)易新聞的首頁上加了腳本導致顯示出錯，于是就建議他先進行版本回退，然后去排查添加的腳本。結果朋友說是他在看新聞的時候發(fā)現(xiàn)的問題。

朋友：只有首頁的錯亂，點別的打開都是正常的。網(wǎng)頁上有不安全的腳本，瀏覽器阻止加載。。想不到這么大的網(wǎng)站，還存在未被驗證的腳本。地址輸入欄，右邊那個警告，點加載 就行了 。。。。

我按照朋友的說法操作后，首頁果然正常加載：

朋友：為啥子瀏覽器會阻止哎？

朋友的這個問題引發(fā)了我的重視，我注意到瀏覽器地址欄的頭是HTTPS，于是警覺：看來問題就出在這個HTTPS協(xié)議頭上。

直接在瀏覽器地址欄輸入http://news.163.com網(wǎng)頁正常訪問，但是從百度推薦里面點進去排版錯亂。不知道大家有沒有仔細查看我開始給出的百度推薦點進去的瀏覽器地址欄：https://news.163.com

再加上，異常頁面的報錯信息：This request has been blocked; the content must be served over HTTPS。最終問題得到準確定位。

好嘛，果然是HTTPS的問題。

總結一下：

問題描述：
網(wǎng)易新聞門戶里面的CSS和JS等資源是基于http協(xié)議的，我們手動以http協(xié)議頭去訪問沒有問題。但是百度推薦里面給出的默認訪問地址是以HTTPS協(xié)議頭去訪問，當我們點進去的時候，服務器接收到HTTPS的請求，但是頁面上的資源是基于http協(xié)議的，所以這些CSS和JS等資源就不能被正常加載，導致我們看到排版錯亂。

問題原因：
HTTPS頁面里動態(tài)的引入HTTP資源，比如引入一個js文件，會被直接block掉的.在HTTPS頁面里通過AJAX的方式請求HTTP資源，也會被直接block掉的。這是因為瀏覽器為了安全，HTTPS下不能跨協(xié)議直接調用http。

問題解決：
參照https://segmentfault.com/q/1010000005872734得到一種最簡單的解決辦法：對于同時支持HTTPS和HTTP的資源，引用的時候要把引用資源的URL里的協(xié)議頭去掉，瀏覽器會自動根據(jù)當前是HTTPS還是HTTP來給資源URL補上協(xié)議頭的，可以達到無縫切換。

好的，接下來，在瀏覽器中輸入news.163.com，網(wǎng)頁正常訪問。

但是在實際的生產(chǎn)應用中，問題往往不會這么簡單，那么如何進行跨協(xié)議調用呢，請參看我接下來的文章。

總結

以上是生活随笔為你收集整理的【HTTPS、HTTP】网易新闻首页https跨协议调用http的问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內容還不錯，歡迎將生活随笔推薦給好友。