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的呢？可以參考微構網路團隊另外的一篇文章《

方法二：在網頁頭部用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