Vue图片403报错处理（referrerpolicy=no-referrer）

富文本中录入了一些文字加第三方的图片，之后在结果页面显示录入的文字+图片，部分图片不能正常显示

 <img src="xxxx.jpg"  referrerPolicy="no-referrer" />

网页在加载资源时，默认在请求头里会带有当前网址
如果服务端做了限制，非同源的网址或者非白名单中的网址不能访问，就会出现403

如果给链接加属性 referrerPolicy=“no-referrer” 则会在请求头里会屏蔽掉 Referer 的发送，此时图片便能正常访问了

下面是在vue中使用的几个坑
（1）兼容性问题

网上给的方法除了 给img标签加属性外，也可以加meta

<meta name="referrer" content="never">

此方法经试验是有效的，但是会将所有的请求的请求头中的 Referer 都去掉
都去掉其实在网页显示上是不会有什么问题的，但是如果有以下场景就得注意了

1. 在后台中使用了该标签，会导致js和php的一些跳转出现问题，比如js的history.back()方法将找不到上一个页面，因为被禁止referrer了，php的$_[‘HTTP_REFERRER’]
   也同样为空值
2. 该属性会导致一些第三方的统计代码失效，比如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)

参考文档
https://blog.csdn.net/VhWfR2u02Q/article/details/80088388
主流浏览器图片反防盗链方法总结
https://blog.csdn.net/weixin_43627766/article/details/91418873
meta使用referrer要注意的问题
https://blog.csdn.net/oucqsy/article/details/75099037
v-html中使用filters