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

在前端开发中,遇到后端返回的图片URL在浏览器直接打开正常,但在src引用时出现403防盗链错误。本文介绍了两种解决方案:1. 使用HTML的meta标签设置referrer为no-referrer;2. 利用第三方服务如images.weserv.nl进行图片代理。这两种方法能有效解决图片加载的403问题。
摘要由CSDN通过智能技术生成

在写小程序的时候,后端返回一个网址,直接浏览器打开没问题,但是src访问这个网址获取图片,显示会出现403(防止盗链)的错误
最开始百度以为是没清缓存,后来发现403是防止盗链的错误(这种设计,是api厂商正常保证自己的服务器不被刷流量)

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

<meta name="referrer" content="no-referrer" />
1
referrer的几种状态


<!-- a标签的referrer -->
<a href="http://example.com" referrer="no-referrer|origin|unsafe-url">xxx</a>

<!-- img/image标签的referrer -->
<img referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"/>
<image referrer="no-referrer|origin|unsafe-url" src="{{item.src}}"></image>

方法二:使用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://xxx.jpg

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

https://images.weserv.nl/?url=xxx.jpg
 

  • 2
    点赞
  • 12
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值