https網頁加載http資源導緻的頁面報錯及解決方案

　　https是當下的網站的主流趨勢，甚至像蘋果這樣的大公司，則完全要求使用者必須使用https位址。

　　然而對于以前http連結來說，我們往往就存在一個相容性問題，因為你不可能一下就全部切換過去，應該在很長一段時間内，https與http将共存。

　　https與http共存的場景有如：

　　　　1. app已經釋出出去，其調用接口的位址為http的，那麼這是必須相容的。

　　　　2. app中嵌入了h5頁面，而這頁面在以前的設計中是使用http通路的，如果換成https位址，極有可能将導緻h5頁面無法打開。

　　　　3. 對于流量推廣一類的業務，可能原有的http推廣位址已經發送給第三方，而且即使你通知到第三方要求改為https，也不排除有http位址的通路。

　　針對以上場景，我們肯定是要https與http共存的。

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

　　因為https位址中，如果加載了http資源，浏覽器将認為這是不安全的資源，将會預設阻止，這就會給你帶來資源不全的問題了，比如：圖檔顯示不了，樣式加載不了，JS加載不了。因為樣式類，基本上都是寫在本地的，是以一般還可以，但是一些公共的js檔案，往往就是存在于cdn或者其他伺服器上，這時候，如果通路不了，可能就導緻了業務就完全操作不了。比如：jquery效法加載失敗，可能所有的操作、請求都将無效了。

　　将http請求直接跳轉至https請求，是一種解決辦法，而且很多公司都是這麼幹的，比如百度什麼的，但是前提是，你所有的服務都已切換https完成。

　　但是對于，要相容https、http兩種協定的情況，怎樣才能做到呢？

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

2. 可用的方法，用同一套代碼，在背景請求辨別好協定，将該變量傳到html頁面中，進行協定替換，如：背景變量，$protocol = 'https://';  前台接收變量 src='{$protocol}res.aa.com/jquery.js'。

3. h5方法，使用js自己加載協定情況，如在body onload='aa()', 在aa() 方法中，将資源按照需求加載進來即可。

4. 推薦方法，不指定具體協定，使用資源協定自适配，比如，目前為https頁面，那麼就是https資源，如果是http頁面，那麼就是http資源。具體方法超簡單：<script src='//www.aa.com/jquery.js'></script>

　　其實就這麼回事，隻是線上上遇到這種問題，也很無賴啊。如果在公司管理很嚴的情況下，由于該問題導緻的事故，這将是會受到記過處分的。

　　自适配是個好東西。

　　

不要害怕今日的苦，你要相信明天，更苦！