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

再看下控制臺(tái)就是這樣的錯(cuò)誤：

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.

這個(gè)報(bào)錯(cuò)非常常見，大概意思就是在https頁(yè)面中請(qǐng)求http資源會(huì)被阻止，應(yīng)該通過https來訪問資源。

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

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

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

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

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

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

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

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

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

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

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