今天看到一個(gè)案例網(wǎng)站，用戶反饋說這個(gè)網(wǎng)站在chrome瀏覽器下，偶爾使用https訪問頁(yè)面錯(cuò)亂，結(jié)果查看網(wǎng)絡(luò)請(qǐng)求發(fā)現(xiàn)js和css資源是http請(qǐng)求。于是自然就報(bào)如下錯(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.

就是說https頁(yè)面中引用了http資源，而禁止訪問http資源，應(yīng)該改成https請(qǐng)求。

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

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

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

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

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

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

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

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

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