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

前言

最近在做项目的时候，由于后端引用了第三方的数据资源，而第三方的图片资源开启了防盗链，导致前端在展示图片数据的时候出现403的问题，如何在不借助后端的情况下解决这个问题？本文就介绍如何从前端来解决图片加载出现403问题。

解决这个问题之前，首先分析其具体原因。在我们的项目代码中通过 img 标签引入一个第三方的图片地址，浏览器在解析这个图片的时候，设置了图片防盗链的第三方平台判断了访问来源 referer ，就是从哪个网站访问这个图片，如果是你的网站去加载这个图片，那么 referer 就是你的网站地址。

如果我们的网站地址不在第三方平台的白名单内，这个图片资源请求就会被拦截。当直接把图片地址放到浏览器地址栏打开时我们发现这个图片是可以打开的，所以解决这个问题的关键就是不发送referer ，也就是没有来源。那么第三方平台那边，就认为是从浏览器直接访问的，所以就能加载正常的图片了。

如果网站想要控制页面发送给 server 的 referrer 信息的，可以使用referer metadata 参数。

referer 的 metedata 属性可设置 content 属性值主要有以下几个：

default：如果当前页面使用的是 https 协议，而正要加载资源使用的是普通的 http 协议，则将 http header 中额 referer 置为空；
never：删除 http head 中的 referer；
always：不改变 http header 中的 referer 的值；
origin：只发送 origin 部分；

如果页面中包含了如下 meta 标签，则从当前页面中发起的 http 请求将只携带 origin 部分：

<meta name="referrer" content="origin">

在标签里加 meta，把referrer 的 metadata content属性值设置为 nerver：

<meta name="referrer" content="never">

这样存在第三方网站上的图片，在你的网站上就可以访问了。

但是还有一个问题，就是如果你的网站某些功能是需要发送 referrer 信息的，那上面的的设置就不行了，比如用到了百度统计。这会导致百度统计的代码不能正常使用，因为它需要发送 referrer 信息给百度统计。这可怎么办呢？往下看。

先将referer 的 metedata content 属性值设置为 always：

<meta id="referrer" name="referrer" content="always">

这样就先保证加载了百度统计的代码了使其正常使用，然后再通过js把 referrer 的metadata content 属性值设置为 nerver：

document.getElementById("referrer").setAttribute("content", "never");

这样就能解决第三方图片防盗链，又能用到百度统计了。

https//image.weserv.nl是一个开源的图片缓存和处理的服务平台，将图片地址附加到这个链接之后也可解决访问图片403问题，使用方式：https//image.weserv.nl/?url=图片链接

将“图片链接”换成实际访问的图片链接，并且可以在链接中加上如裁剪等图片处理参数，具体参数查看文档https://images.weserv.nl/docs/

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