在写小程序的时候,后端返回一个网址,直接浏览器打开没问题,但是src访问这个网址获取图片,显示会出现403(防止盗链)的错误
最开始百度以为是没清缓存,后来发现403是防止盗链的错误(这种设计,是api厂商正常保证自己的服务器不被刷流量)
方法一:使用no-referrer
这种方案不仅针对图片的防盗链,还可以是其他标签.
在前端页面头部添加一个meta
<meta name="referrer" content="no-referrer" />
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)▼显示*(\:\/\/)/,'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
2020年10月22日 下午8:08 沙发
很久没有过来了,今天过来学习学习!