微信模板消息详情页空白，Angular 项目404 的解决方法 _生活知道

微信服务号模板消息详情页打开空白页面
问题描述
正常运行的微信服务号，突然间发现模板消息的详情页打开是空白页面了（是不是自己动了什么？完全没印象）试了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=\”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],
exports: [RouterModule]
})
export class AppRoutingModule { }

下面是 Angular 项目主页代码：

自己是一名从事了多年的前端老程序员，小编为大家准备了新出的前端编程学习资料，免费分享给大家！
如果你也想学习前端，那么帮忙转发一下然后再关注小编后
【微信模板消息详情页空白，Angular 项目404 的解决方法】以上就是朝夕生活（www.30zx.com）关于“微信模板消息详情页空白， Angular 项目404 的解决方法”的详细内容，希望对大家有所帮助！

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

猜你喜欢