chrome等瀏覽器中https網站報blocked:mixed-content錯誤解決方案
有人反饋網站網站打開的時候頁面錯亂，之前還是好好的，但突然打開就錯位了，打開網絡請求一看發現這樣的錯誤：
再看下控制台就是這樣的錯誤：
Mixed Content: The page at ‘https://xxx’ was loaded over HTTPS, but requested an insecure stylesheet ‘http://xxx’. This request has been blocked; the content must be served over HTTPS.
這個報錯非常常見，大概意思就是在https頁面中請求http資源會被阻止，應該通過https來訪問資源。
實際上在IE等瀏覽器上即便是在https中請求http的資源一樣是可以訪問的，然而在chrome等瀏覽器中是不可以的。那么如何解決這個問題呢？下面提供兩種方法來解決：
方法一：把頁面內的資源請求路徑改造成為https
這是一種非常直觀的改造方式，一般來講也很簡單，只需要在開發過程中我們所有的資源路徑使用相對路徑即可，比如根目錄路徑用一個ROOT常量代替；這樣只需要修改這個常量的值即可。然而事實上文章開頭的案例實際上設計開發過程的初衷也是使用https的，然而為什么突然間就成了http的呢？可以參考微構網絡團隊另外的一篇文章《為何網頁中資源的路徑一會是http一會是https？》。
方法二：在網頁頭部用meta標簽聲明。
根據一些公開的資料表面，只需要在html網頁head部分添加如下代碼即可：
<meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests”>
大概的意思就是讓瀏覽器自動轉變對資源的請求方式，強制把頁面所有的http請求自動變成https請求。這樣一處理后我們可以看下有什么變化。
首先用最簡單的右鍵查看源代碼方式查看輸出的前端頁面原始信息，我們會發現頁面中引用的資源路徑是http的
一般來講，這種情況下瀏覽器去請求這些資源的時候自然是用http去請求的，然而加上上面一行代碼的作用就是告訴瀏覽器你給我強制請求https的資源。於是我們查看網絡請求就可以看到所有的資源請求均變成了https。
關於這種方式大家可以訪問一篇名為《How to Disable Mixed Content Security Warning in Google Chrome》的文章，是外國朋友寫的，寫得很詳細，原文地址如下：
https://thehackernews.com/2015/04/disable-mixed-content-warning.html