解决引用图片403加载失败问题

自己开发了个资源项目，前期运行稳定，没啥问题，可是几个月后发现爬虫爬下来的资源，视频展示图不显示加载不出来了，查看后请求返回状态为403，猜想应该是做了防盗链措施了。于是网上搜一波看看有啥就觉方法，别说还真有，而且很稳很有用。所以在此做个笔记。

网上提供的解决方法有两种，分别看下

使用 `images.weserv.nl` 方案

getImage(url){
	console.log(url);
	// 把现在的图片连接传进来，返回一个不受限制的路径
	if(url !== undefined){
		return url.replace(/^(http)[s]*(\:\/\/)/,'https://images.weserv.nl/?url=');
	}
}

把图片路径直接传进去,替换一下原来url的http/https.或者直接在图片url前加上https://images.weserv.nl/?url=
例如下面，其中图片的地址前缀http://是可以省略的

1	https://images.weserv.nl/?url=http://img.zcool.cn/community/01d881579dc3620000018c1b430c4b.JPG@3000w_1l_2o_100sh.jpg

其中https://images.weserv.nl/ 这个网址是一个提供图像缓存和调整大小服务。我们的服务器调整您的图像大小，在全球范围内缓存并显示它。可以点进去看看

使用 `no-referrer` 方案(推荐)

这种方案不仅针对图片的防盗链,还可以是其他标签。

在前端页面头部添加一个`meta`

1	<meta name="referrer" content="no-referrer" />

referrer介绍

在流量监测中，访客的来源信息是一个很重要的信息，包括访客的访前链接，以及搜索关键词。在HTTP请求中有一个referrer标签，用来指明当前流量的来源参考页。例如在http://www.bitauto.com/ 上点击一个链接到达www.taoche.com 首页，那么就referrer就是http://www.bitauto.com/ 了。在Javascript中，我们可以通过document.referrer来获取同样的信息。通过这个信息，我们就可以知道访客是从什么渠道来到当前页面的。这对于网站分析来说，是非常重要的，这可以告诉我们不同渠道带来的流量的分布情况，还有用户搜索的关键词等，都是通过分析这个referrer信息来获取的。

referrer的几种状态

策略名称	属性值(新)	属性值旧
No Referrer	no-referrer	never
No Referrer When Downgrade	no-referrer-when-downgrade	default
Origin Only	origin	-
Origin When Cross-origin	origin-when-crossorigin	-
Unsafe URL	unsafe-url	always

a标签的referrer

1	<a href="http://example.com" referrer="no-referrer\|origin\|unsafe-url">xxx</a>

img/image标签的referrer

1 2	<img referrer="no-referrer\|origin\|unsafe-url" src="{{item.src}}"/> <image referrer="no-referrer\|origin\|unsafe-url" src="{{item.src}}"></image>

说明

如果我们是访问的gif图片,使用第一种方案是没有gif效果的,只能显示静态图片.这个时候推荐大家使用第二种.亲测可以完美展示gif效果.

参考资料

https://segmentfault.com/a/1190000011628835
https://www.cnblogs.com/mttcug/p/8109036.html

使用 images.weserv.nl 方案

使用 no-referrer 方案(推荐)

在前端页面头部添加一个meta