解决图片的防盗链导致图片显示不出来

之前开发的时候,使用了豆瓣的 API 获取图书的图片,突然某天所有图片挂了,以为发生了什么事情。研究了很久,原来豆瓣使用了防盗链,要解决这个问题,有几种解决方法。

图片的防盗链

因为之前使用了豆瓣的图书 API 用着的时候web 系统突然发现所有的图片都访问不了、然后谷歌一查原来豆瓣采取了防盗链。

问题很简单,就是我希望在自己的页面里用 \<img src=”xxxx” \/> 来引用其他网站的一张图片,但是他的网站设置了防盗链的策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回 403 forbidden。我的目的就是用最方便的方法使得我的页面能够不受他的防盗链策略的影响。

解决的方案

1.使用后台的预下载(把图片下载下来放到服务器下)

缺点: 占用服务器的空间,访问速度没有豆瓣提供的稳点。有些网站是静态的如 hexo 就无法实现。

2.第三方代理

缺点: 不稳点,第三方代理可能在国内访问不稳定,在国内没有好的推荐。也可以自己做一个代理,之前有人用 GO 做过一个。
下面有一个,url 后面填上豆瓣 Api 返回的图片地址

\<img src=”https://images.weserv.nl/?url=foo.com/foo.jpg&w=100" \/>

3.还有一种比较友好和奢侈的,上传 CDN 调用 CDN 的地址,

缺点: 有点奢侈,因为所有图片都存到 CND 占用大量空间,CND 可能需要钱购买,CND 服务商提供图片上传的 API

4.删除 Header 中的 Referrer

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

content 有四个值可以选择 never,always,origin,default 这是来自于 whatwg 标准,浏览器对他的支持还是很好的。
MDN 标准,还多了一个 no-referrer

5.添加 ReferrerPolicy 属性

添加 meta 标签相当于对文档中的所有链接都取消了 referrer,
而R eferrerPolicy 则更精确的指定了某一个资源的referrer策略。
关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer,如下编写即可:

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

兼容情况

文章对你有用?给博主一个支持
0%