共计 2518 个字符，预计需要花费 7 分钟才能阅读完成。
微信服务号模板消息详情页打开空白页面
问题描述
正常运行的微信服务号，突然间发现模板消息的详情页打开是空白页面了（是不是自己动了什么？完全没印象）试了 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的@然后去远足，提供了错误根源才能解决这个问题。
