微信打開https頁面顯示空白解決記錄

背景

利用阿里oss搭建了一個靜態服務器，存放一些靜態資源和h5頁面，而且配上了阿里cdn服務（Let's Encrypt證書），接下來測試https連接，在瀏覽器中測試也ok(chrome地址欄顯示綠色的安全標識)，ios的微信測試了下也是ok的，可是安卓微信打開顯示空白，右上角的...打開功能選項，也沒有複製連接（正常打開的頁面會有）

分析

• 1.會不會是頁面兼容性的問題？以前也有一些h5沒作好兼容，最後顯示空白，能夠寫個測試的html訪問測試（我沒試），可是經過點擊右上角...出現的功能選項中沒有複製連接功能，判斷沒有請求成功，而不是頁面的兼容性致使
• 2.會不會是機器和網絡的問題？多臺機器檢測和切換wifi、4g測試後，都顯示空白，排除這個緣由
• 3.會不會是由於https的緣由？修改連接爲http協議訪問（沒有強制http跳轉https，因此http協議仍是能訪問）,發現能夠訪問，由此確認是https的緣由

解決

查找解決方案

百度關鍵詞微信 https 打不開後，查看了幾篇相似文章（問答）和對應的瀏覽後發現，發現是證書沒上傳正確，阿里雲的ca管理起因證書上傳，證書文件部分應該上傳完整證書鏈的pem編碼，即fullchain.pem（以前上傳的是cert.pem）

從新上傳證書

Let’s Encrypt產生的目錄結構爲

├── cert.pem -> 祕密
├── chain.pem -> 祕密
├── fullchain.pem -> 祕密
├── privkey.pem -> 祕密

cert.pem是證書，chain.pem是證書鏈編碼,fullchain.pem是cert.pem和chain.pem的證書集合,privkey.pem是私鑰文件

阿里雲打開CA證書服務-個人證書-上傳原有證書,

• 證書名稱按規則取（原本想說隨便取，可是想了想證書一多，是否是要根據名稱讓本身想起來這個證書是幹嗎的）。
• 證書文件填寫fullchain.pem的內容(!!! 注意必定要清除掉多餘的空白行)，
• 證書私鑰填寫privkey.pem的內容

從新配置cdn的https

阿里雲打開CDN-對應域名的配置-https設置選擇剛纔配置的證書，保存後安卓微信訪問ok

參考

• 關於安卓手機微信訪問https連接白屏的問題
• let's encrypt 證書放在阿里雲 CDN 上時綠時紅
• 原文