CSS文件中的图片Referer判断差异

在开发的过程中，通常，页面会引用了样式文件也会引入图片，同时样式文件给我们的页面也会设置背景图片。

当前端项目打包部署上OSS上，并且OSS上设置了防盗链的配置，就会导致CSS文件中引入的图片文件访问不了。

原因是因为，referer来源是不一致的。页面资源和页面引入资源的来源是都是站点的主域名地址，但是CSS文件中的图片资源的referer来源变成了样式文件路径。

这个问题仅在安卓手机、Windows电脑上存在，在Iphone苹果手机上不存在。

分析可能是苹果手机上的浏览器中，a.CSS样式中的b.jpg背景图片的样式referer来源是站点的主域名地址，而其他设备浏览器却会把图片的referer来源更改为样式文件的路径。

这样如果我们在做一些防盗链处理的时候就需要格外小心。

解决办法

方案一：修改前端代码，把前端CSS引入的图片放到页面代码中。

方案二：修改OSS防盗链配置，把样式文件路径加入白名单中。