今天看到一個案例網(wǎng)站，用戶反饋說這個網(wǎng)站在chrome瀏覽器下，偶爾使用https訪問頁面錯亂，結果查看網(wǎng)絡請求發(fā)現(xiàn)js和css資源是http請求。于是自然就報如下錯誤：

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資源，而禁止訪問http資源，應該改成https請求。

但實際上這個網(wǎng)站在絕大多數(shù)情況下訪問是正常的，js和css等資源請求方式也都是https的。那么為什么有時候莫名其妙的會出現(xiàn)http呢？通過簡單分享后發(fā)現(xiàn)了是由如下因素造成的：

1、該網(wǎng)站可以同時支持http和https的訪問，并沒有強制用戶訪問https或http，也就是統(tǒng)一為一種請求方式。

2、網(wǎng)站前端模板是由后端通過動態(tài)的邏輯生成且緩存下來的，且后臺生成資源路徑?jīng)Q定使用http還是https是通過$_SERVER['REQUEST_SCHEME']（php語法規(guī)則寫法）動態(tài)獲取的。于是大多數(shù)用戶使用宣傳中的https訪問網(wǎng)站，模板文件中資源路徑自然緩存為https的；但是少量的用戶使用http訪問網(wǎng)站，但網(wǎng)站邏輯上并沒有強制用戶跳轉到https，于是如果剛好到了需要進行頁面緩存的時間段，模板文件中的資源路徑自然就緩存為http的。

基于上面兩個因素，當個別時間模板文件中的資源路徑如果剛好是由訪問http的用戶訪問請求是生成且緩存的，當用戶使用https訪問網(wǎng)站的時候就出現(xiàn)了上面這種情況了。

那么如何解決這種問題呢？下面提供兩種解決方案。

1、強制網(wǎng)站訪問https

也就是如果用戶訪問http，通過服務器端配置，讓用戶自動跳轉使用https請求訪問網(wǎng)站，這樣自然就沒有使用http的情況發(fā)生，緩存的文件中的資源路徑也就不可能出現(xiàn)http請求路徑了。

2、通過相對協(xié)議路徑

通常我們在引用一個資源路徑的時候，都會通過http://或https://來定義，這樣的話就是規(guī)定了我這個資源是用http或者https請求，相當于給規(guī)定死了。但是實際上我們可以直接寫成//,也就是直接忽略掉https還是http協(xié)議。這樣在前端瀏覽器就會自動執(zhí)行類似后端$_SERVER['REQUEST_SCHEME']（php語法規(guī)則寫法）的作用，給請求加上當前訪問的請求協(xié)議了。如果當前請求是http就以http請求資源，反之https也是同樣的道理。這種方式在很多網(wǎng)站都會出現(xiàn)這種寫法，也是一種不錯的方式。