【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，網頁正常訪問。
但是在實際的生產應用中，問題往往不會這麼簡單，那麼如何進行跨協議呼叫呢，請參看我接下來的文章。