微信模板消息詳情頁空白，Angular 項目404 的解決方法

時間 2019-11-09

標籤微信模板消息詳情空白 angular 項目解決方法欄目 AngularJS 简体版

原文原文鏈接

微信服務號模板消息詳情頁打開空白頁面

問題描述

正常運行的微信服務號，忽然間發現模板消息的詳情頁打開是空白頁面了（是否是本身動了什麼？徹底沒印象）試了3個品牌的安卓手機：小米、華爲、魅族，打開都是空白頁（手機上），蘋果手機能夠打開，PC端Chrome 和 QQ瀏覽器 均可以正常打開，使用微信開發者工具也能夠正常打開。網上搜索不少帖子說是 SSL 證書鏈不完整致使，而蘋果手機不受該影響因此能夠正常打開。還真信了啊，浪費了一天時間。。。可是很疑惑，由於證書是在騰訊雲服務器中申請的（雖然是免費的），而後下載來的，照理應該是完整的吧。到 https://www.sslceshi.com/ssl_check/ 驗證是否完整，看到 證書鏈詳情 部分沒有缺失的話就代表是完整的，最終定位下來是 Angular 項目返回 404 致使的。使用抓包工具 Fiddler 在瀏覽器中刷新詳情頁連接時候開啓捕獲能夠看到404。使用方法以下：html

最終解決問題後的效果是：
前端

解決問題

修改Tomcat 配置文件 server.xml 中的標籤 <Host name="localhost"> 的內容，添加代碼：
<Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />，添加後標籤 <Host name="localhost"> 的完整代碼是：web

<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 &quot;%r&quot; %s %b" />
               
       <Valve className="org.apache.catalina.valves.rewrite.RewriteValve" />

      </Host>

值得一提的是不用擔憂的再複製出一個標籤 <Host name="www.xdfznh.club">....，通過測試只要設置上面的 <Host name="localhost">.... 便可。typescript

本次試驗的環境是 CentOS 7 ，Tomcat 9，而且 Tomcat 是默認的安裝路徑，即 /usr/local/tomcat9，那麼要在路徑 /usr/local/tomcat9/conf/Catalina/localhost 下建立名稱爲 rewrite.config 的文件，其中的所有代碼是 :apache
```
RewriteCond %{REQUEST_PATH} !-f
RewriteRule ^/wxpadfe/(.*) /wxpadfe/index.html
```
上面的 wxpadfe 是 Angular 的編譯項目名，同時也是 tomcat 中部署的項目所在的目錄名，即本試驗的前端項目文件在路徑 /usr/local/tomcat9/webapps/wxpadfe 下。到此 tomcat 中的配置完畢。segmentfault
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 項目主頁代碼：tomcat

<!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>