天天看點

4種https頁面加載http資源報錯時的解決方案

4種https頁面加載http資源報錯時的解決方案

改https初看起來,其實就是一個域名指向的問題,也許咱們隻要将http的請求,直接跳轉到https位址去,那麼也就完成了https的切換。實際并非這麼簡單的。

由于https位址中,若是加載了http資源,浏覽器将認為這是不安全的資源,将會預設阻止,這就會給你帶來資源不全的問題了,好比:圖檔顯示不了,樣式加載不了,js加載不了。

由于樣式類,基本上都是寫在本地的,是以通常還能夠,可是一些公共的js檔案,每每就是存在于cdn或者其餘伺服器上,這時候,若是通路不了,可能就緻使了業務就徹底操做不了。好比:jquery效法加載失敗,可能全部的操做、請求都将無效了。

如果一個https網站中的某個頁面内容加載時請求了有js、css、圖檔和接口四個http協定的資源。就會出現報錯資訊:​

module.exports = Config[Fix];
Mixed Content: The page at 'https://www.fly63.com/***/' was loaded over HTTPS,
but requested an insecure image 'http://www.fly63.co/***/img.jpg'.
This content should also be served over HTTPS.      

這是由于HTTPS 是 HTTP over Secure Socket Layer,以安全為目标的 HTTP 通道,是以在 HTTPS 承載的頁面上不允許出現 http 請求,一旦出現就是提示或報錯。

下面總彙幾種解決方案,供大家參考。

方法1:服務端設定header​

好在 W3C 工作組考慮到了我們更新 HTTPS 的艱難,在 2015 年 4 月份就出了一個 Upgrade Insecure Requests 的草案,他的作用就是讓浏覽器自動更新請求。

在我們伺服器的響應頭中加入:(當然如果操作不了伺服器,下面還會介紹另一種解決辦法)。​

header("Content-Security-Policy: upgrade-insecure-requests");      

方法2:頁面設定meta頭​

在頁面中加入 meta 頭:(我使用這個方法)

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

如果頁面比較多,需要統一改變的話,我們可以将這條語句添加到全局JS檔案裡,全局調用。

方法三:删除連結中的http:​

推薦方法,不指定具體協定,使用資源協定自适配,比如,目前為https頁面,那麼就是https資源,如果是http頁面,那麼就是http資源。具體方法超簡單:

<script src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>      

方式四:​

最笨的方法,直接複制原有代碼,寫成兩套代碼,一套為http使用,一套為https使用,http和https各自指向各自服務。

4種https頁面加載http資源報錯時的解決方案