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>

  其實就這么回事,只是在線上遇到這種問題,也很無賴啊。如果在公司管理很嚴的情況下,由於該問題導致的事故,這將是會受到記過處分的。

  自適配是個好東西。

  


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM