访问图片出现403的解决办法

比眉伴天荒 2023-10-18 10:52 122阅读 0赞

在写小程序的时候,访问一个网址获取图片,但是显示会出现403(防止盗链)的错误.  
总结了一下,有两种方法是可以解决这个问题的:

*  使用`images.weserv.nl`方案
 *  使用`no-referrer`方案

###### 第一种:使用`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=`  
如:

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

原图片的`http://`是可以省略的(与上面的`getImage`函数是一样的结果)

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

###### 第二种:使用`no-referrer`方案 ######

这种方案不仅针对图片的防盗链,还可以是其他标签.  
在前端页面头部添加一个`meta`

referrer的几种状态  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYW50YW5nXzE5ODY_size_16_color_FFFFFF_t_70]  
a标签的`referrer`

img/image标签的referrer

###### 说明 ######

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

–补充—  
经过试验,不是多有gif网站都支持第二种方式,还是有些会失败.请大家自行试验.如果有更好的方法可以一起交流.

--------------------

文章参考:  
https://segmentfault.com/a/1190000011628835  
https://www.cnblogs.com/mttcug/p/8109036.html

您的打赏是对我劳动成果的肯定,无论数额多少,都非常感谢,谢谢打赏!  
微信二维码  
![微信打赏][70]

支付宝二维码:  
![支付宝打赏][70 1]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYW50YW5nXzE5ODY_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2018110514103997.?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYW50YW5nXzE5ODY=,size_16,color_FFFFFF,t_70
[70]: https://img-blog.csdn.net/20181008175625908?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYW50YW5nXzE5ODY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70
[70 1]: https://img-blog.csdn.net/20181008181104874?watermark/2/text/aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3RpYW50YW5nXzE5ODY=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70