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

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

有时候在页面里用img标签访问页面图片返回403 forbidden，而浏览器可以直接打开。

是因为图片服务器加了防盗链，会检测访问图片的referer。

总结了一下,有两种方法是可以解决这个问题的:

使用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=
如:

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

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

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

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

http请求体的header中有一个referrer字段，用来表示发起http请求的源地址信息，这个referrer信息是可以省略但是不可修改的，就是说你只能设置是否带上这个referrer信息，不能定制referrer里面的值。

这种方案不仅针对图片的防盗链,还可以是其他标签。

在前端页面头部添加一个meta

1	<meta name="referrer" content="no-referrer" />

referrer的几种状态

a标签的referrer

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

img/image标签的referrer

1 2	<img referrer="no-referrer\|origin\|unsafe-url" src="{{item.src}}"/> <image referrer="no-referrer\|origin\|unsafe-url" src="{{item.src}}"></image>

说明

如果访问gif图片，使用第一种方案是没有gif效果的，只能显示静态图片，这个时候推荐大家使用第二种。

第一种:使用images.weserv.nl方案

第二种:使用no-referrer方案

说明

第一种:使用`images.weserv.nl`方案

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