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

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

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

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

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

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

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

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

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

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

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

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

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

好嘛，果然是HTTPS的問題。

總結(jié)一下：

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

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

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

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

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

總結(jié)

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

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