那些年，那些让人掉发的bug。

iOS伪元素不居中的问题。

原因： 兼容问题。

解决：将统计的文本用span包一层。

invalid regular expression invalid group specifier name

原因：Safari正则兼容问题

解决：修改正则

Windows Android Studio 无法检测到模拟器的问题

解决：adb 端口连接问题 参考

k8s 部署 pm2 启动的 nodejs 应用失败

原因：因为 k8s 启动的容器存在很多环境变量，pm2读取环境变量可能会失败。

解决：移除 pm2 启动方式，使用原生的node启动应用。

支付服务部分支付宝订单创建失败

原因： 创建订单的需要一个subject参数作为标题，支付宝的订单标题不能带特殊字符。

解决：服务端过滤掉标题中的字符，只允许中英文数字和字母。

re := regexp.MustCompile("[^0-9a-zA-Z\u4e00-\u9fa5]+")
str = re.ReplaceAllString(inStr, "")

向服务器上传文件时提示 nginx 413 request too large

原因：nginx body 限制了请求体的大小。

解决：

http{
   ....
  client_max_body_size       20m；
}

美化input上传文件时,设置cursor: pointer 不生效

原因：兼容问题？？设计如此。

解决：给 input[type=file] 设置 font-size 可解决。

Safari 浏览器使用:after伪元素下标时无法和目标文本居中

原因：兼容问题

解决：目标文本包裹一层span标签可以解决。

position sticky 滚动停驻一段时间自己又不固定在目标位置了。

原因：使用方法错误。

解决： 父元素设置高度100%，不要设置overflow：hidden 。

HTML5播放视频资源出现 Uncaught (in promise) DOMException: The play() request was interrupted by a call to pause()

原因：视频video.play()失败了，返回了一个reject。

解决：只有video.pay()返回resolve才算播放成功。

参考资料：Google Developers

Taro混合原生组件使用wxParse无法找到wxParse template。

原因：这是因为需要配置config/index.js里的copy路径。

解决：增减copy配置，将原生组件复制到编译目录下面。

font-weight数值设置字体加粗无法生效

原因：这是因为你指定的字体在用户的系统不存在，所以导致无法加粗。

解决：不用数值设置可以生效，或者使用引入Google字体库 。

自动部署服务前端资源404

原因： 部分应用实例未成功更新，导致了负载均衡路由到了未更新的应用实例，出现404。

解决： 临时解决-强制更新service。

权限中间件下发的token无法通过后台鉴权接口

原因：

1. 权限中间件 => 生成token(未经过Encode) => 后台系统通过权限 => 下发到前端。

2. 前端带上token => 被Encode => 权限中间件 => token(被Encode) => 后台系统拒绝 => 前端显示未登录。

解决： 生成token时不带奇奇怪怪的字符。

Golang的ioutil.ReadAll函数导致后续无法读取请求的body

原因：函数会消费掉stream。

解决：ioutil.NopCloser函数重新赋值。

Refused to set unsafe header "Cookie"

原因： 同事尝试在ajax请求中手动设置cookie，前端并不允许这样做。Stack Overflow 

解决： 移除相关代码，前端请求会自动附带相关cookie。

MySQ Index column size too large. The maximum column size is 767 bytes

原因：5.6的默认设置和5.7的默认配置不一致。

解决：更改5.6的默认配置或者直接升级5.7，建议是用新版的MySQL。

####PWA页面偶尔无法加载图片资源

原因：某些历史图片资源是http链接，pwa无法加载

解决：链接资源使用正则替换掉所有传入协议。

url.replace(/^http(s?):\/\//i, "//")

SSR渲染 用户信息错误的被渲染

原因： 带有token的渲染请求被缓存，导致用户信息被共享。

解决：如果页面带有token，不进行数据缓存。

Rancher 部署k8s服务无法暴露到公网

原因：k8s默认服务的端口范围是30000-32767。

解决：修改暴露端口到合适的范围。

微信安卓浏览器video标签层级问题

原因：兼容问题，微信浏览器内核经过魔改。

解决：添加x5指定标签。微信x5浏览器指南

React父组件列表数据更新传入子组件不生效

原因：子组件没有触发更新。

解决：给子组件一个不固定的key。

安卓ＷebView里的H5页面cookie问题

原因：多次跳转，如果安卓没有特别处理，会丢失cookie。（顺带还有无法清除cookie....，单页面reload会有问题）

解决：尽量不多次跳转，不使用cookie作为接口凭证。或者寻求客户端解决方案。

ＷebView里的Nextjs H5页面禁止缩放失败

原因：meta viewport标签被默认覆盖了。

解决：在_app.tsx覆盖回去。

判断是否是App的ＷebView失败。

原因：检测方法使用window.NativeInterface 和iOS的 webkit.messagehandler 和某些社交软件重名了导致判断失败。

解决：检测WebView是否有指定的方法。

WebView自动带上cookie请求接口失败

原因：WebView可能存在多个重名token，前端请求自动带上了最为匹配的token，导致最后请求接口凭证不正确。

解决：客户端清空WebView的token，然后设置客户端Token。（安卓的清空token方法可能不大靠谱....）