nginx+vconsole调试网页在vivo浏览器无法显示图片问题

一、问题描述

昨天测试小伙伴提了一个特殊的bug，在安卓vivo手机浏览器上访问网页，网页的图片按钮和录播图一闪而过后便消失不见：

二、问题排查

项目采用Nuxt框架，排查的方向大致如下：
1.其它手机浏览器是否有复现：
经测试，其它手机自带的vivo浏览器正常，vivo手机自带浏览器无法显示，但下载chrome浏览器后测试正常。
2.如何在vivo测试机自带的vivo浏览器上复现：
（1）尝试用vivo测试机通过数据线连接电脑chrome浏览器进行联调：失败。
（2）首先在本地搭建nuxt环境，运行项目，将vivo手机与开发电脑连接同一个局域网，最后用vivo手机自带的vivo浏览器访问电脑启动的nuxt服务：访问正常，未复现。
（3）本地构建正式环境的产物，并通过pm2运行，最后用vivo手机自带的vivo浏览器访问：访问正常，未复现。
（4）下载正式环境的部署包，并通过pm2运行，最后用vivo手机自带的vivo浏览器访问：访问正常，未复现。

至此，无法获取正式环境在vivo浏览器的报错信息。但又不能直接在正式环境上开启vconsole进行调试，于是尝试使用nginx转发本地请求，对请求内容进行修改，插入vconsole脚本进行调试：
（5）nginx+vconsole开启正式环境网页调试：

# nginx.conf 配置
    server {
        listen       3000;
        server_name  localhost;
        location /{
			proxy_pass https://xxx.xxx.com;
           # 设置代理头  
			proxy_set_header Host xxx.xxx.com;  
			proxy_set_header X-Real-IP $remote_addr;  
			proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;  

			# 禁用响应压缩  
			proxy_set_header Accept-Encoding "";  # 禁用gzip，以确保sub_filter能工作  

			# 开启sub_filter功能  
			sub_filter_once off;  # 允许多次替换  
			sub_filter '</head>' '<script src="https://xxx.xxx.com/js/vconsole.js"></script><script>new VConsole();</script></head>';  # 替换内容  
			# 替换域名
			sub_filter 'https://xxx.xxx.com' 'http://192.168.xx.xx:3000';
		}
	}

经过vconsole查看，未发现任何报错信息。本地转发访问正式环境，也能正常显示。

综合上述结果，大胆猜测，图片未显示应该与网页域名有关。

再结合网页图片的特征（父容器都采用fixed定位）而有些手机浏览器会针对某些域名开启广告过滤功能，因此有可能被判定为广告。

于是找到vivo浏览器的广告拦截，并将其关闭后，该问题得以解决。