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

最新推荐文章于 2024-07-11 23:14:44 发布

盏茶作酒

最新推荐文章于 2024-07-11 23:14:44 发布

阅读量4.6k

点赞数 2

文章标签：图片403

原文链接：https://blog.csdn.net/weixin_45272449/article/details/100896116

版权

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

摘要由CSDN通过智能技术生成

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

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

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

<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