2021/07/05 Error - Vue网络图片加载失败问题

图片防盗链

一、原理

先说说防盗链的原理，http 协议中，如果从一个网页跳到另一个网页，http 头字段里面会带个 Referer。图片服务器通过检测 Referer 是否来自规定域名，来进行防盗链。

如果盗用网站是 https 的 protocol，而图片链接是 http 的话，则从 https 向 http 发起的请求会因为安全性的规定，而不带 referer，从而实现防盗链的绕过。

比如现在在 cnode 这里，由于我们启用了 https，所以任何 http 的图片几乎都可以直接贴过来并显示了。

官方输出图片的时候，判断了来源(Referer)，就是从哪个网站访问这个图片，如果是你的网站去加载这个图片，那么Referer就是：你的网站地址；；你网站地址，肯定没在官方的白名单内，所以就看不到图片了。

因此，若不发送Referer，也就是没有来源。那么官方那边，就认为是从浏览器直接访问的，所以就能加载正常的图片了。

二、解决

在index.html中添加:

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