來源 | https://www.fly63.com

改https初看起來，其實(shí)就是一個(gè)域名指向的問題，也許咱們只要將http的請求，直接跳轉(zhuǎn)到https地址去，那么也就完成了https的切換。實(shí)際并非這么簡單的。

由于https地址中，若是加載了http資源，瀏覽器將認(rèn)為這是不安全的資源，將會(huì)默認(rèn)阻止，這就會(huì)給你帶來資源不全的問題了，好比：圖片顯示不了，樣式加載不了，js加載不了。

由于樣式類，基本上都是寫在本地的，因此通常還能夠，可是一些公共的js文件，每每就是存在于cdn或者其余服務(wù)器上，這時(shí)候，若是訪問不了，可能就致使了業(yè)務(wù)就徹底操做不了。好比：jquery效法加載失敗，可能全部的操做、請求都將無效了。

如果一個(gè)https網(wǎng)站中的某個(gè)頁面內(nèi)容加載時(shí)請求了有js、css、圖片和接口四個(gè)http協(xié)議的資源。就會(huì)出現(xiàn)報(bào)錯(cuò)信息：

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，以安全為目標(biāo)的 HTTP 通道，所以在 HTTPS 承載的頁面上不允許出現(xiàn) http 請求，一旦出現(xiàn)就是提示或報(bào)錯(cuò)。

下面總匯幾種解決方案，供大家參考。

方法1：服務(wù)端設(shè)置header

好在 W3C 工作組考慮到了我們升級 HTTPS 的艱難，在 2015 年 4 月份就出了一個(gè) Upgrade Insecure Requests 的草案，他的作用就是讓瀏覽器自動(dòng)升級請求。
在我們服務(wù)器的響應(yīng)頭中加入：（當(dāng)然如果操作不了服務(wù)器，下面還會(huì)介紹另一種解決辦法）。

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

方法2：頁面設(shè)置meta頭

在頁面中加入 meta 頭：（我使用這個(gè)方法）

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

如果頁面比較多，需要統(tǒng)一改變的話，我們可以將這條語句添加到全局JS文件里，全局調(diào)用。

方法三：刪除鏈接中的http:

推薦方法，不指定具體協(xié)議，使用資源協(xié)議自適配，比如，當(dāng)前為https頁面，那么就是https資源，如果是http頁面，那么就是http資源。具體方法超簡單：

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

方式四：

最笨的方法，直接復(fù)制原有代碼，寫成兩套代碼，一套為http使用，一套為https使用，http和https各自指向各自服務(wù)。

學(xué)習(xí)更多技能

請點(diǎn)擊下方公眾號