有人反饋網(wǎng)站網(wǎng)站打開的時候頁面錯亂，之前還是好好的，但突然打開就錯位了，打開網(wǎng)絡(luò)請求一看發(fā)現(xiàn)這樣的錯誤：

再看下控制臺就是這樣的錯誤：

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資源會被阻止，應(yīng)該通過https來訪問資源。

實際上在IE等瀏覽器上即便是在https中請求http的資源一樣是可以訪問的，然而在chrome等瀏覽器中是不可以的。那么如何解決這個問題呢？下面提供兩種方法來解決：

方法一：把頁面內(nèi)的資源請求路徑改造成為https

這是一種非常直觀的改造方式，一般來講也很簡單，只需要在開發(fā)過程中我們所有的資源路徑使用相對路徑即可，比如根目錄路徑用一個ROOT常量代替；這樣只需要修改這個常量的值即可。然而事實上文章開頭的案例實際上設(shè)計開發(fā)過程的初衷也是使用https的，然而為什么突然間就成了http的呢？可以參考微構(gòu)網(wǎng)絡(luò)團(tuán)隊另外的一篇文章《為何網(wǎng)頁中資源的路徑一會是http一會是https？》。

方法二：在網(wǎng)頁頭部用meta標(biāo)簽聲明。

根據(jù)一些公開的資料表面，只需要在html網(wǎng)頁head部分添加如下代碼即可：

<meta http-equiv=”Content-Security-Policy” content=”upgrade-insecure-requests”>

大概的意思就是讓瀏覽器自動轉(zhuǎn)變對資源的請求方式，強(qiáng)制把頁面所有的http請求自動變成https請求。這樣一處理后我們可以看下有什么變化。

首先用最簡單的右鍵查看源代碼方式查看輸出的前端頁面原始信息，我們會發(fā)現(xiàn)頁面中引用的資源路徑是http的

一般來講，這種情況下瀏覽器去請求這些資源的時候自然是用http去請求的，然而加上上面一行代碼的作用就是告訴瀏覽器你給我強(qiáng)制請求https的資源。于是我們查看網(wǎng)絡(luò)請求就可以看到所有的資源請求均變成了https。

關(guān)于這種方式大家可以訪問一篇名為《How to Disable Mixed Content Security Warning in Google Chrome》的文章，是外國朋友寫的，寫得很詳細(xì)，原文地址如下：

https://thehackernews.com/2015/04/disable-mixed-content-warning.html