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

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

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

使用 images.weserv.nl 方案

1
2
3
4
5
6
7
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/[email protected]_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


-------------本文结束感谢您的阅读-------------
感觉文章不错,就赏个吧!
0%