在开发的过程中,通常,页面会引用了样式文件也会引入图片,同时样式文件给我们的页面也会设置背景图片。
当前端项目打包部署上OSS上,并且OSS上设置了防盗链的配置,就会导致CSS文件中引入的图片文件访问不了。
原因是因为,referer来源是不一致的。页面资源和页面引入资源的来源是都是站点的主域名地址,但是CSS文件中的图片资源的referer来源变成了样式文件路径。
这个问题仅在安卓手机、Windows电脑上存在,在Iphone苹果手机上不存在。
分析可能是苹果手机上的浏览器中,a.CSS样式中的b.jpg背景图片的样式referer来源是站点的主域名地址,而其他设备浏览器却会把图片的referer来源更改为样式文件的路径。
这样如果我们在做一些防盗链处理的时候就需要格外小心。
解决办法
方案一:修改前端代码,把前端CSS引入的图片放到页面代码中。
方案二:修改OSS防盗链配置,把样式文件路径加入白名单中。