解决微信开发者工具图片 404 但浏览器可正常访问的问题
前端5 个月前
问题现象
调试用微信开发者工具调试图片显示，控制台始终提示【图 1】的错误，但是浏览器可以正常访问【图 2】，最终是因为 ngnix 缓存问题，导致无法正常显示，实际图片确实是 404。
图 1
图 2
根本原因复盘（核心雷区）
上面潜在有一个坑，因为项目是测试阶段为了方便就把 upload 目录上传到 git 仓库了。github workflow 在服务器上执行构建是会先把本地更改丢失，这就是上次发版和本次发版时间段内在服务器上上传的图片，在本次发版时会把图片给删除，在加上测试 ngnix 上给图片做了缓存，图片删除了还能访问。
这就是多个雷区叠加到只的问题，切记该怎么做就怎么做不要走捷径。
排查与定位方向（避坑指南）
下面是排查定位问题的几个方向：
- 微信开发者工具：菜单栏-设置-代理设置
- ☑️ 不使用任何代理，勾选后直连网络
- 使用系统代理
- 手动设置代理
- 微信开发者工具：编辑器-右上角【三】详情-
- ☑️ 不校验合法域名、web-view（业务域名）、TLS 版本以及 HTTPS 证书
- Charles：Tools – Map Remote…
- Charles： macOS Proxy
- 图片缓存
- 确认服务器 ngnix 是否为图片或目录设置了静态缓存，浏览器可访问，切换无痕模式再次访问试试。