H5白屏问题

前言

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

一、H5请求接口带不上Cookiehtml

解决方法:前端使用了 webpack 对项目进行打包,其中 crossOriginLoading 这一项配置的是 anonymous,因为配置错了,致使Cookie带不上前端

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

 

二、H5白屏,js 代码报错致使的webpack

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

 

三、H5白屏,CDN问题web

解决方法:因为部分CDN加速区域不一样,致使各个区域请求 js、css 等资源响应的速度不一样,部分可能请求超时,(好比当时有个客户是国外的,打开咱们的 H5 连接一直白屏,而咱们这边却正常)这种状况只能联系CDN提供方看可否解决,此外也能够用 17测 进行资源请求的测试跨域

 

四、H5白屏,微信扫码进入页面白屏浏览器

解决方法:因为微信有缓存大小的限制,前端若在缓存中存放了太多的数据的话,可能会致使缓存失效,进而白屏,这一点是在清除微信缓存以后无心间找到的解决方法缓存

 

五、H5白屏,部分苹果手机用户白屏微信

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

 

 

参考:

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

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

相关文章
相关标签/搜索