PicGo+Gitee 打造最强图床
平常写文章展示图片都是使用的第三方图片托管服务，这些第三方服务有可能会是不是无法访问，严重的可能会跑路，那么图片就无法显示了，因为GitHub的国内访问速度太慢了，所以为了方便自己展示图片然后速度也得到
事先准备
PicGo 安装
官网：PicGo
PicGo是开源的，有Electron基础可以二次开发，GitHub地址：PicGo
Node.js
Git
官网：Git - Downloading Package (git-scm.com)
这些是实现功能的基础，所以必须要有。
开始配置
当你下载完毕以后，打开PicGo - 插件设置 - 搜索gitee - 选择gitee-uploader
我这里已经安装了所以会显示已安装。
配置Gitee
新建仓库的时候勾选。
右上角头像 - 账号设置 - 左侧列表选择私人令牌 - 生成新令牌
只选择project即可，因为只用到这个权限。
然后根据提示生成了一串Token，建议复制保存到一个地方，因为这个Token只出现这一次，所以保存好。
配置PicGo
我们已经事先安装好了Gitee插件，所以我们直接打开图床设置
设置完成以后直接保存，然后就可以进行使用了。
PS：Gitee上传图片之前最后压缩以下不要超过1MB，不然有可能会需要登陆显示。
防盗链
如果你使用其他服务来访问该图床提供的服务，那么就需要破解Gitee的防盗链来达到目的。
这也是我在搭建完成图床以后，发现的问题，所以了解了一下，然后记录在这里，一次性解决多个问题吧算是，开源伟大。
什么是防盗链
防盗链不是一根链条，正确的停顿应该是防·盗链——防止其他网站盗用我的链接。
我把图片上传到gitee的服务器，得到了图片的链接，然后拿着这个链接在第三方编辑器中使用，这就是在“盗用”——因为这张图片占用了gitee的服务器资源，却为第三方编辑器工作，gitee得不到好处，还得多花钱。
如何实现防盗链
要实现防盗链，就需要知道图片的请求是从哪里发出的。可以实现这一功能的有请求头中的origin和referer。origin只有在XHR请求中才会带上，所以图片资源只能借助referer。其实gitee也确实是这么做的。
通过判断请求的referer，如果请求来源不是本站就返回302，重定向到gitee的logo上，最后在第三方网站引用存在gitee的资源就全变成它的logo了。
- 首先请求正常的图片，但是没有返回200，而是302重定向，其中响应头中的location就是要重定向去向的地址，如果没有就是不显示。
- 接着浏览器会自动请求这个location，并用这个返回结果代替第一次请求的返回内容。
最后，我们的图片在第三方网站就变成gitee的logo或者直接不显示。
破解防盗链
想让Gitee不知道我在盗用，就不能让他发现请求的来源是第三方，要把referer藏起来才行。
HTML添加以下代码
1
<meta name="referrer" content="no-referrer" />或者
1
<img referrer="no-referrer|origin|unsafe-url" src="{item.src}"/>配置文件
head
1
2
3
4
head: [
// 破解Gitee防盗链
["meta", { name: "referrer", content: "no-referrer" }],
],Vue
可以在vue中的public文件夹下的index.html文件加入代码
1
<meta name="referrer" content="no-referrer" />