美文网首页
解决防盗链导致图片不显示

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

作者: 浮名虚誉架构师 | 来源:发表于2018-05-19 15:24 被阅读0次

    当在自己的页面里用 <img src=”xxxx” /> 来引用其它网站的图片时,发现它的网站设置了防盗链策略,会在后台判断请求的Referrer属性是不是来自于一个非本域名的网站,如果来源不是本域名就返回 403 forbidden

    有如下的解决方案

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

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

    2.第三方代理

    缺点:不稳点,第三方代理可能在国内访问不稳定。也可以自己做一个代理

    下面有一个,url 后面填上网站 Api 返回的图片地址

    <img src=”https://images.weserv.nl/url=https://img3.doubanio.com/view/photo/s_ratio_poster/public/p2544866651.jpg" />

    3.上传 CDN 调用 CDN 的地址

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

    4.删除 Header 中的 Referrer

    content 有四个值可选择 never,always,origin,default,这是来自 whatwg 的标准,浏览器对其支持还是很好的

    MDN 标准,还多了一个 no-referrer

    5.添加 ReferrerPolicy 属性

    添加 meta 标签相当于对文档中的所有链接都取消了 referrer,而ReferrerPolicy 则更精确的指定了某一个资源的referrer策略。

    关于这个策略的定义可以参照MDN。比如我想只对某一个图片取消referrer,如下编写即可:

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

    相关文章

      网友评论

          本文标题:解决防盗链导致图片不显示

          本文链接:https://www.haomeiwen.com/subject/kvtadftx.html