关于图片防盗链 - 图片加载报错403，但可以单独打开图片链接

2024-04-12 02:52:46

一. 问题场景：

项目引用远程图片固定链接时（多为第三方链接），图片会发生在页面无法显示，报错403，应该是加了防盗链，会检测访问图片的referer；但是单独打开该远程链接，又可以打开；
不过我们的项目暂时不需要处理这一块，先记录下关于图片防盗链吧

二. 如何解决？

在HTML代码的head中添加

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

三. 为什么会出现这种情况？

主要是该站点的图片采用了防盗链的规则，该站点在得知有请求时，会先判断请求头中的信息，如果请求头中有Referer信息，然后根据自己的规则来判断Referer头信息是否符合要求，Referer 信息是请求该图片的来源地址。

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

服务器端在拿到这个referrer值后就可以进行相关的处理，比如图片资源，可以通过referrer值判断请求是否来自本站，若不是则返回403或者重定向返回其他信息，从而实现图片的防盗链。上面出现403就是因为，请求的是别人服务器上的资源，但把自己的referrer信息带过去了，被对方服务器拦截返回了403。

在前端可以通过meta来设置referrer policy(来源策略)，所以针对上面的403情况的解决方法，就是把referrer设置成no-referrer，这样发送请求不会带上referrer信息，对方服务器也就无法拦截了。

浏览器中的请求头信息：

相信看到这，也就明白了，当我的请求发出去时，该站点查看Referer头信息，一看来源不是本站，就报错403了。

百度发现一篇关于Referer与图片防盗链的文章，很详细，保存一下
img标签访问图片403(http referrer),直接访问图片链接可以打开
Referer与图片防盗链

关于图片防盗链 - 图片加载报错403，但可以单独打开图片链接相关推荐

react 中使用import()实现按需加载报错解决方法 --‘import’ and ‘export’ may only appear at the top level
react 中使用import()实现按需加载报错解决方法 --'import' and 'export' may only appear at the top level 参考文章: (1)rea ...
vs2019 解决方案加载报错
vs2019 解决方案加载报错参考文章: (1)vs2019 解决方案加载报错 (2)https://www.cnblogs.com/dxqNet/p/11880974.html 备忘一下.
Centos系统创建用户oracle后，用该用户登陆系统，页面加载报错GConf error
Linux 的 GConf error 解决办法问题: Centos系统创建用户oracle后,用该用户登陆系统,页面加载报错,导致重新进入Centos系统后出现: GConf error:Fail ...
cesium 地图无法加载报错401 缺少token
cesium 地图无法加载报错401 缺少token 首先,报错401 说明用户没有访问权限,需要进行身份认证,也就是cesium需要密钥,也是最近实行的吧,因为之前不用也能加载出地图. token ...
Django - 网页加载报错：A server error occurred. Please contact the administrator(亲测)
1.网页加载时报错显示: 2.pycharm中Terminal报错显示: 如: File "E:\flask_env\django_env\lib\site-packages\django\ ...
用户控件制作时设计模式加载报错的解决办法
最近改了个用户控件,在设计界面加载时总是报错. 网上查了下可以用DesignMode解决,但是在构造函数里用DesignMode还是不行.查原因后发现该Design模式不能嵌套UserControl, ...
so加载报错:dlopen failed: couldn't map ... Permission denied
转自:https://blog.csdn.net/u013270444/article/details/60869376 问题描述: 我的应用当中集成了一个安全相关的sdk,而这个sdk中使用的so是 ...
vue-cli3+typescript+路由懒加载报错问题
vue-cli3的版本是3.4.1 出现的情况是网页显示正常,但是终端一直提示找不到模块: 如果去掉路由懒加载的方式,就没有报错: 原因是以前我们习惯直接写文件名而不加后缀, 现在使用ts时就需要写v ...
html清除require报错,javascript - requirejs加载报错问题？
1.使用requirejs写了个demo.html,第一次加载页面时能够正常显示,随后刷新页面就开始报错,虽然页面还是正常显示,但是我不理解为什么会这样. 2.我的另一个999.html文件(跟dem ...

最新文章

热门文章