微信公众号开发，白屏问题

问题分析：

• 根据之前的项目经验，分析造成白屏的原因有一下几点：
  1. 微信授权部分的逻辑代码有问题（后面优化了一波，还是没解决问题）
  2. 进入页面，请求的资源太多，有大的文件阻碍其他资源加载。解决方法静态资源走cdn（像之前萌星满月照的项目所有资源都放在甲方的同一个服务器，后面把静态资源放在我们自己服务上，就好了）
  3. 通过fundebug监控的报错，猜测可能是IM功能（聊天功能）影响。（经过注释所有IM相关的代码，解决了一批用户的白屏问题，后面还是有大量白屏问题出现，继续找别的原因）

在上面三个分析都进行优化和解决后还是有白屏问题，而且我们自己复现不了，fundebug有好多请求状态为0的报错，陷入瓶颈。

• 问题现象
  1、针对 请求状态为0的报错，后台同事帮忙抓包找原因，发现服务端返回的是401，但是我们收到的是0，觉得是两次请求（两次请求的含义看附录）中有一个出了问题。（没太在意）
  2、后面发现是页面没跳转（没授权）导致白屏，造成没跳转的原因，请求没成功 也没返回状态码，如果报错401，就要重新授权的。

• 下面这段 找到 返回状态码为什么是0的原因，也找出来复现白屏的方法
  然后只能打断点盲查，发现axios响应错误拦的截器没有返回值。 前端猜想是请求头的问题，后来经后台同事验证确实是请求头的问题（服务器返回时的请求头，和前面前端发送的请求头不一致导致），导致后端跨域问题，据说是后端升级配置，laravel配置的问题（laravel5.6的bug 具体什么bug 后台同志应该会了解），也找到了复现的方法toke失效时会出现白屏（token是存到localStorage中的失效时间设置的超级长，中间迁移数据时，批量让用户token失效，之后开始出现白屏问题，所以之前没出问题是因为token没失效）

后面又发现touken失效后会重新授权了，页面url也是正常的和授权之前一样，但还是白屏。
这次分析是因为微信浏览器对pushState支持不太友好导致（解释下，就是用window.location.replace(url)刷新页面，但是呢试图没变），解决方法给url添加个随机数，让它与跳转前有点差异 。即 http://www.baidu.com 到 http://www.baidu.com?t=24543534543

附录：

1. 下图前端每次请求，network实际都有两次请求，第一次是跨域，第二次才是真正的请求返回数据

   
   image.png