报错处理(referrerpolicy=no"/>
Vue图片403报错处理(referrerpolicy=no
富文本中录入了一些文字加第三方的图片,之后在结果页面显示录入的文字+图片,部分图片不能正常显示
<img src="xxxx.jpg" referrerPolicy="no-referrer" />
网页在加载资源时,默认在请求头里会带有当前网址
如果服务端做了限制,非同源的网址或者非白名单中的网址不能访问,就会出现403
如果给链接加属性 referrerPolicy=“no-referrer” 则会在请求头里会屏蔽掉 Referer 的发送,此时图片便能正常访问了
下面是在vue中使用的几个坑
(1)兼容性问题
网上给的方法除了 给img标签加属性外,也可以加meta
<meta name="referrer" content="never">
此方法经试验是有效的,但是会将所有的请求的请求头中的 Referer 都去掉
都去掉其实在网页显示上是不会有什么问题的,但是如果有以下场景就得注意了
- 在后台中使用了该标签,会导致js和php的一些跳转出现问题,比如js的history.back()方法将找不到上一个页面,因为被禁止referrer了,php的$_[‘HTTP_REFERRER’]
也同样为空值 - 该属性会导致一些第三方的统计代码失效,比如cnzz,百度统计,解决方法是使用iframe包裹一层,用一个单独的html加载统计代码
各有利弊
(2)网页的缓存问题
如果我们在网页中插入一个img标签,网页会去请求这个img标签所指向的地址,这是对的
但是这并不限于 img 标签必须出现在页面里,出现在缓存里同样有效
现在有这样的第一个字符串 <img src=“xxxx.jpg” referrerPolicy=“no-referrer” />
需要利用Vue中的 v-html 显示到网页中
链接是第三方且加了防盗链的话,直接v-html不会显示
let str = '<img src="xxxx.jpg" referrerPolicy="no-referrer" />'
let $d = $(str)
$d.find('img').each(function(){$(this).attr('referrerPolicy','no-referrer')
})
return $d.prop("outerHTML")
经过这样处理看起来是没问题的,但是实际上是不行的,F12查看图片的确加上了这个属性,但是还是报403
这里的原因是因为 第二行 的时候会生成一个 虚拟的 img 这个时候就回去请求图片
注意这个时候 img 上是没有 referrerPolicy 这个属性的
再之后 v-html 请求的时候 其实相当于是第二次请求,会走缓存
一张图片的请求时长是 5s (假设),如果第一张图片还没请求完成,这个时候再请求一次,浏览器肯定是做了处理不会再次请求,而是将两次并为一次
所以,图片不显示的问题就知道原因了,虚拟dom果然还是有坑的
(3)v-html不支持filter,无法全局使用
这个不多加赘述,网上的博文一大堆
简单使用如下
// filter.js
const Picture403filter = function(val) {try{return val.replace("<img", "<img referrerpolicy='no-referrer'")}catch(err){return val}
}
export {Picture403filter
}// main.js
import * as filters from './filter/index'
Object.keys(filters).forEach(key => {Vue.filter(key, filters[key])
})// *.vue
v-html='$options.filters.Picture403filter(xxxx)
参考文档
主流浏览器图片反防盗链方法总结
meta使用referrer要注意的问题
v-html中使用filters
更多推荐
Vue图片403报错处理(referrerpolicy=no
发布评论