微信模板消息详情页空白，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>

最后来确认下，有些帖子说要在 tomcat 的配置文件 web.xml 中设置 404 跳转页面，通过测试在作了上面的配置以后就不用在 web.xml 中设置 404跳转页面了。
最最后，要特别感谢 segmentfault 的 @而后去远足，提供了错误根源才能解决这个问题。