前几天有位条友问了我一个问题,就是他在请求API接口的时候,返回的JSON格式的数据,图片地址都已经拿到了,本地开发环境页面中的调用也没有错误,但是页面中就是不显示图片,并且图片返回的结果全部都是403,就是下面的图片展示的效果。
图片返回403
最开始我听了这位兄弟描述的问题之后,我以为是请求的数据有问题,但是我看了返回的连接也都能正常访问,但是又返回个403是什么鬼呢?
想必大家也都知道403状态码是什么意思,表示资源不可用,服务器实际上是已经响应了用户的请求,但是给拒绝了。
然后我又想难道是跨域了吗?不应该啊,请求的仅仅是一个API而已,而且控制台也并没有报跨域的错误,况且数据已经返回了。
最后我突然想到了是不是因为没有设置 header 头请求信息的 Referrer 字段呢?然后我在首页index.html的head头里加了一个meta标签:
加上referrer字段
Referrer这个字段的具体作用是用户(浏览器)向服务器发送资源请求时,用户所处的位置,用于用户跟踪的。主要是有三种场景会发送该字段:
- 表单提交;
- 网页点击跳转链接;
- 页面中请求静态资源,例如:加载脚本、样式、图片等。
上述三种场景,其中第三种是最经典的一个场景,有的站不让图片外链,只有自己的站点才能显示,非自家的站点加载图片时都会报错,所以可以设置在请求资源的时候不发送 Referrer 字段。因此需要加上上述的meta标签来解决这个问题。
这就是我解决请求第三方资源的时候图片不加载的方法,各位朋友有遇到过类似的问题吗,欢迎各位大佬在评论区交流。