微信模板消息详情页空白,Angular 项目404 的解决方法

 阅读约 7 分钟

微信服务号模板消息详情页打开空白页面

问题描述

正常运行的微信服务号,突然间发现模板消息的详情页打开是空白页面了(是不是自己动了什么?完全没印象)试了3个品牌的安卓手机:小米、华为、魅族,打开都是空白页(手机上),苹果手机可以打开,PC端ChromeQQ浏览器 都可以正常打开,使用微信开发者工具也可以正常打开。网上搜索很多帖子说是 SSL 证书链不完整导致,而苹果手机不受该影响所以可以正常打开。还真信了啊,浪费了一天时间。。。但是很疑惑,因为证书是在腾讯云服务器中申请的(虽然是免费的),然后下载来的,照理应该是完整的吧。到 https://www.sslceshi.com/ssl_check/ 验证是否完整,看到 证书链详情 部分没有缺失的话就表明是完整的,最终定位下来是 Angular 项目返回 404 导致的。使用抓包工具 Fiddler 在浏览器中刷新详情页链接时候开启捕获可以看到404。使用方法如下:

angular项目深链接返回404.png

最终解决问题后的效果是:
调整tomcat配置成功演示.png

解决问题

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

    值得一提的是不用担心的再复制出一个标签 <Host name="www.xdfznh.club">....,经过测试只要设置上面的 <Host name="localhost">.... 即可。

  • 本次试验的环境是 CentOS 7Tomcat 9, 并且 Tomcat 是默认的安装路径,即 /usr/local/tomcat9,那么要在路径 /usr/local/tomcat9/conf/Catalina/localhost 下创建名称为 rewrite.config 的文件,其中的全部代码是 :

    RewriteCond %{REQUEST_PATH} !-f
    RewriteRule ^/wxpadfe/(.*) /wxpadfe/index.html

    上面的 wxpadfeAngular 的编译项目名,同时也是 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@然后去远足,提供了错误根源才能解决这个问题。
阅读 147发布于 2019-11-07

推荐阅读
目录