接口命名规范之图片加载失败原因排查

这是我参与更文挑战的第4天，活动详情查看： 更文挑战

因网站日活量的提升，日前网站上线了广告推广栏位页面功能进行变现，但收到个别用户反馈：

网站首页的广告推广栏位本该显示广告图片却显示空白

问题排查

服务端检查

接口排查

使用postman和curl工具模拟网络请求皆可以正常获取数据

客户端排查

在确认服务端没有问题的情况下，进行客户端的排查。

1. 借助谷歌浏览器F12开启开发者工具，选中Network，勾选Preserve log以及Disable cache，资源类型选择All， 刷新页面

2. 发现有些请求状态异常，http请求Status为：blocked:other， 可以基本确认浏览器拦截了http请求，且这些请求正为获取广告栏位图片的接口

浏览器拦截请求原因

1. 发现http请求Status为：blocked:other
2. 用户的浏览器插件中有AdBlock
3. 这些url中都包含有advert关键字

由以上几点可以得出结论：

1. 由于API接口路径中包含了advert的敏感关键字，
2. 触发了浏览器插件AdBlock的广告拦截机制，
3. 直接拦截终止http请求，
4. 导致图片数据加载失败，
5. 最终广告栏位留白。

解决方法

接口路由中避免使用ad/advert/advertisement等与广告相关的关键字；
因为这些字符很容易触发客户端浏览器插件的广告拦截机制；

解决问题思路

开发设计适合自顶而下，但排查问题优先从底层接口排查，由下而上，逐步排除各个环节，进而确认问题环节。