前言
前阵子弄了灰度环境,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白屏,微信扫码进入页面白屏
解决方法:由于微信有缓存大小