微信服務號模板消息詳情頁打開空白頁面
問題描述
正常運行的微信服務號，突然間發現模板消息的詳情頁打開是空白頁面了（是不是自己動了什麼？完全沒印象）試了3個品牌的安卓手機：小米、華爲、魅族，打開都是空白頁（手機上），蘋果手機可以打開，PC端Chrome 和 QQ瀏覽器 都可以正常打開，使用微信開發者工具也可以正常打開。網上搜索很多帖子說是 SSL 證書鏈不完整導致，而蘋果手機不受該影響所以可以正常打開。還真信了啊，浪費了一天時間。。。但是很疑惑，因爲證書是在騰訊雲服務器中申請的（雖然是免費的），然後下載來的，照理應該是完整的吧。到 https://www.sslceshi.com/ssl_check/ 驗證是否完整，看到 證書鏈詳情 部分沒有缺失的話就表明是完整的，最終定位下來是 Angular 項目返回 404 導致的。使用抓包工具 Fiddler 在瀏覽器中刷新詳情頁鏈接時候開啓捕獲可以看到404。使用方法如下：
最終解決問題後的效果是：
解決問題
-
修改
Tomcat配置文件server.xml中的標籤<Host name="localhost">的內容，添加代碼：<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />，添加後標籤<Host name="localhost">的完整代碼是：<Host name="localhost" appBase="webapps" unpackWARs="true" autoDeploy="true"> <!-- SingleSignOn valve, share authentication between web applications Documentation at: /docs/config/valve.html --> <!-- <Valve className="org.apache.catalina.authenticator.SingleSignOn" /> --> <!-- Access log processes all example. Documentation at: /docs/config/valve.html Note: The pattern used is equivalent to using pattern="common" --> <Valve className="org.apache.catalina.valves.AccessLogValve" directory="logs" prefix="localhost_access_log" suffix=".txt" pattern="%h %l %u %t "%r" %s %b" /> <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" /> </Host>值得一提的是不用擔心的再複製出一個標籤
<Host name="www.xdfznh.club">....，經過測試只要設置上面的<Host name="localhost">....即可。 -
本次試驗的環境是
CentOS 7，Tomcat 9， 並且Tomcat是默認的安裝路徑，即/usr/local/tomcat9，那麼要在路徑/usr/local/tomcat9/conf/Catalina/localhost下創建名稱爲rewrite.config的文件，其中的全部代碼是 :RewriteCond %{REQUEST_PATH} !-f RewriteRule ^/wxpadfe/(.*) /wxpadfe/index.html上面的
wxpadfe是Angular的編譯項目名，同時也是tomcat中部署的項目所在的目錄名，即本試驗的前端項目文件在路徑/usr/local/tomcat9/webapps/wxpadfe下。到此tomcat中的配置完畢。 -
Angular項目不要使用HashLocationStrategy，不僅是爲解決本案例的404問題，同時也爲解決oauth網頁鑑權的問題。使用命令ng build --prod --aot --base-href wxpadfe編譯Angular項目。到此就保證了編譯的項目名和tomcat中的項目所在目錄名一致，同時rewrite.config中的項目名稱也一致。 -
爲提供更多證據，下面貼出
Angular項目中根路由的代碼：const routes: Routes = [ { path:'soDtl', loadChildren:'./pages/sendoutdetail/sendoutdetail.module#SendoutdetailModule', data:{ title:'成品發貨單明細',isRemove: true } },............... ............... ............... ............... @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { } -
下面是
Angular項目主頁代碼：<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>我是標題哦</title> <base href="/"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="icon" type="image/x-icon" href="favicon.ico"> </head> <body> <app-root></app-root> </body> </html> - 最後來確認下，有些帖子說要在
tomcat的配置文件web.xml中設置 404 跳轉頁面，經過測試在做了上面的配置之後就不用在web.xml中設置 404跳轉頁面了。 - 最最後，要特別感謝
segmentfault的@然後去遠足，提供了錯誤根源才能解決這個問題。