H5白屏问题

Posted 2020-11-12 lyc94620

前言

前阵子弄了灰度环境，H5这边需要给灰度环境的接口加上Cookie，配置的期间遇到一些Cookie问题以及白屏在此记录下

1、H5请求接口带不上Cookie

解决方法：前端使用了 webpack 对项目进行打包，其中 crossOriginLoading 这一项配置的是 anonymous，由于配置错了，导致Cookie带不上

`crossOriginLoading`此选项可以启用跨域加载(cross-origin loading) chunk。
  `false`- 禁用跨域加载
  `anonymous` - 启用跨域加载。当使用 anonymous时，发送不带凭据(credential)的请求。在加载此脚本资源时不会带上用户的 Cookies
  `use-credentials`- 启用跨域加载。发送带凭据(credential)的请求。在加载此脚本资源时会带上用户的 Cookies

 

2、H5白屏，js 代码报错导致的

解决方法：这种报错最明显也是最简单的一种，直接复制链接在网页打开，F12进入开发者模式，观察 console 的报错并解决对应的问题即可

 

3、H5白屏，CDN问题

解决方法：由于部分CDN加速区域不同，导致各个区域请求 js、css 等资源响应的速度不同，部分可能请求超时，（比如当时有个客户是国外的，打开我们的 H5 链接一直白屏，而我们这边却正常）这种情况只能联系CDN提供方看能否解决，此外也可以用 17测 进行资源请求的测试

 

4、H5白屏，微信扫码进入页面白屏

解决方法：由于微信有缓存大小的限制，前端若在缓存中存放了太多的数据的话，可能会导致缓存失效，进而白屏，这一点是在清除微信缓存之后无意间找到的解决方法

 

5、H5白屏，部分苹果手机用户白屏

解决方法：当时由于前端项目比较多，打包的时候得配置好对应的请求域名，相对繁琐且容易出错，这里就使用了 nginx 重写的规则（前端无需写上对应的资源域名），将对应的环境域名拼接到对应的资源前，此时通过浏览器观察可以看到这些资源先通过301跳转，再请求对应域名的资源。后期发现这种做法出现了部分苹果手机用户进入某些页面的时候白屏，这时候猜想可能是不同手机浏览器机制的问题，Safari浏览器的301机制可能跟其他浏览器的不同，又将前端的请求域名通过301跳转的机制换掉之后就解决了

 

 

参考：

https://www.cnblogs.com/joyco773/p/9049623.html

https://www.jianshu.com/p/561a8720e762