笔者近日刚刚完成了一个Spring boot项目,首页 index.html 页面元素 <img> 引用了第三方服务器的图片链接,在本地测试环境输入 http://localhost 或者 http://127.0.0.1打开首页,图片显示正常,直接在浏览器输入图片路径也是正常显示的。

<img class="banner-image" src="http://img.xxx.cn/image/056ef627a026b86c45be1ce0bb12df5b.jpeg" width="100%" />

       但是项目打包发布到服务端后,在浏览器输入站点首页路径后,这个页面图片显示区域出现一个大大的空白框,于是查看浏览器控制台,发现报错:Failed to load resource: the server responded with a status of 403 (Forbidden)。

       经过查阅相关内容了解到,这是服务器防止盗链的策略引起的。一般来说,从服务器站点下载图片资源,会产生相关的流量费用(比如阿里云的oss服务器),所以需要一些方法来防止类似的盗链情况的发生,背后的原理就是利用 http 请求的 referrer 头信息,headers 中的 referer 表示你是从哪个站点(域名)来到图片资源所在的服务器的,我们请求页面的时候,也通过抓包包软件可以看到这个 referrer 头信息的具体内容,一般来说就是你自己站点的域名

       在服务器端可以获取的 referrer 的内容,并根据需要对其进行处理,比如 referrer 内容为空或者在白名单列表里就不执行防盗链的相关处理,反之则提示403 Forbidden,目前有一个简单的解决这个问题的方法:在我们的HTML页面添加meta属性:

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

       这样处理后,我们的页面在请求第三方服务器的图片资源时,header 的 referrer 头信息就为空了。如果第三方站点允许 referrer 为空的资源请求,那我们就能够正常请求到图片资源了。

参考:referrer策略和meta标签的问题

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐