实用的HTTP请求第三方图片资源出现403的解决办法

前几天有位条友问了我一个问题，就是他在请求API接口的时候，返回的JSON格式的数据，图片地址都已经拿到了，本地开发环境页面中的调用也没有错误，但是页面中就是不显示图片，并且图片返回的结果全部都是403，就是下面的图片展示的效果。

最开始我听了这位兄弟描述的问题之后，我以为是请求的数据有问题，但是我看了返回的连接也都能正常访问，但是又返回个403是什么鬼呢？

想必大家也都知道403状态码是什么意思，表示资源不可用，服务器实际上是已经响应了用户的请求，但是给拒绝了。

然后我又想难道是跨域了吗？不应该啊，请求的仅仅是一个API而已，而且控制台也并没有报跨域的错误，况且数据已经返回了。

最后我突然想到了是不是因为没有设置 header 头请求信息的 Referrer 字段呢？然后我在首页index.html的head头里加了一个meta标签：

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

Referrer这个字段的具体作用是用户（浏览器）向服务器发送资源请求时，用户所处的位置，用于用户跟踪的。主要是有三种场景会发送该字段：

1. 表单提交；
2. 网页点击跳转链接；
3. 页面中请求静态资源，例如：加载脚本、样式、图片等。

上述三种场景，其中第三种是最经典的一个场景，有的站不让图片外链，只有自己的站点才能显示，非自家的站点加载图片时都会报错，所以可以设置在请求资源的时候不发送 Referrer 字段。因此需要加上上述的meta标签来解决这个问题。

这就是我解决请求第三方资源的时候图片不加载的方法，各位朋友有遇到过类似的问题吗，欢迎各位大佬在评论区交流。