![](https://img.laitimes.com/img/_0nNw4CM6IyYiwiM6ICdiwiI0gTMx81dsQWZ4lmZf1GLlpXazVmcvwFciV2dsQXYtJ3bm9CX9s2RkBnVHFmb1clWvB3MaVnRtp1XlBXe0xCMy81dvRWYoNHLwEzX5xCMx8FesU2cfdGLwMzX0xiRGZkRGZ0Xy9GbvNGLpZTY1EmMZVDUSFTU4VFRR9Fd4VGdsYTMfVmepNHLrJXYtJXZ0F2dvwVZnFWbp1zczV2YvJHctM3cv1Ce-cGcq5CMygTOyETMhZzYiZTYhNzMzYzX3ATO1kDM4IzLclDMyIDMy8CXn9Gbi9CXzV2Zh1WavwVbvNmLvR3YxUjLyM3Lc9CX6MHc0RHaiojIsJye.jpg)
改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各自指向各自服務。