共计 1390 个字符，预计需要花费 4 分钟才能阅读完成。
问题
笔者网站的图片都是上传到第三方网站上的，比如 简书、掘金、七牛云上的，但是最近简书和掘金都开启了 防盗链 ，防止其他网站访问他们网站上的图片了，导致笔者的网站存在他们网站上的图片全挂了。
具体问题，就是 html 中通过 img 标签引入一个第三方的图片地址，报 403。但是这个图片地址直接复制出来在地址栏打开，却是看得到的。
原因
官方输出图片的时候，判断了来源 Referer，就是从哪个网站访问这个图片，如果是你的网站去加载这个图片，那么 Referer 就是：你的网站地址；
如果我们的网站地址不在官方的白名单内，所以就看不到图片了。
我们做这个跳板的关键：不发送 Referer，也就是没有来源。那么官方那边，就认为是从浏览器直接访问的，所以就能加载正常的图片了。
解决方案
如原网址：
http://mmbiz.qpic.cn/mmbiz/DU…
显示此图片来自微信公众平台，未经允许不得应用
方法：在 <head> 标签里加 meta
<meta name="referrer" content="never">这样存在第三方网站上的图片，在你的网站上就可以访问了。
referrer
在某些情况下，出于一些原因，网站想要控制页面发送给 server 的 referrer 信息的情况下，可以使用这一 referer metadata 参数。
参数
referer 的 metedata 属性可设置 content 属性值为以下集合：
- never
- always
- origin
结果
- 如果 referer-policy 的值为 never：删除 http head 中的 referer；
- 如果 referer-policy 的值为 default：如果当前页面使用的是 https 协议，而正要加载资源使用的是普通的 http 协议，则将 http header 中额 referer 置为空；
- 如果 referer-policy 的值 origin：只发送 origin 部分；
- 如果 referer-policy 的值为 always：不改变 http header 中的 referer 的值；
举例
如果页面中包含了如下 meta 标签，所有从当前页面中发起的请求将不会携带 referer：
<meta name="referrer" content="never">如果页面中包含了如下 meta 标签，则从当前页面中发起的 http 请求将只携带 origin 部分：
<meta name="referrer" content="origin">最后
博客首更地址：https://github.com/biaochenxuying/blog
往期精文
尤雨溪 6 月 4 日的 Vue 技术分享
[今天尤雨溪公布 Vue 3.0 重大变化！前端框架将何去何从？[ 附完整 PPT]](https://mp.weixin.qq.com/s/fL…
十分钟弄懂：数据结构与算法之美 – 时间和空间复杂度
一张思维导图辅助你深入了解 Vue | Vue-Router | Vuex 源码架构
Vue + TypeScript + Element 项目实战及踩坑记
vue-cli3.x 新特性及踩坑记
那些必会用到的 ES6 精粹
参考文章：
- 微信图片防盗链解决办法
- Meta referrer 标签的简要介绍
欢迎关注以下公众号 全栈修炼 ，学到不一样的武功秘籍！
关注公众号并回复 福利 可领取免费学习资料，福利详情请猛戳：免费资源获取 –Python、Java、Linux、Go、node、vue、react、javaScript
