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

在前端项目部署到OSS并启用防盗链后,由于referer问题,CSS中的图片在安卓和Windows设备上无法显示。苹果设备不受影响可能是因为其浏览器行为不同。解决方案包括修改前端代码将图片内联或调整OSS防盗链白名单设置。
摘要由CSDN通过智能技术生成

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

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

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

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

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

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

解决办法

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

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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值