当前位置：首页 > news >正文

【node】使用express+gitee搭建图床，并解决防盗链问题

news 2025/7/8 23:04:43

首先创建一个gitee的项目，详细步骤我就不一一说明

注解：大家记得将这个项目开源，还有记得获取自己的私钥，私钥操作如下：

node依赖下载：

"axios": "cors": "express": "multer": "nodemon":

app.js代码：

const express = require('express');
const multer = require('multer');
const axios = require('axios');
const cors = require('cors');const app = express();
app.use(cors());
const port = 3000;// 设置 Multer 中间件来处理文件上传
const storage = multer.memoryStorage();
const upload = multer({ storage: storage });// 处理静态文件
app.use(express.static('public'));// 显示图床上的所有图片
app.get('/', async (req, res) => {try {const response = await axios.get('https://gitee.com/api/v5/repos/zsd12138/drawing-bed/contents/image?access_token=xxxxxxxxxx');const images = response.data.map(item => item.download_url);res.send(`<div style="display: flex;">${images.map(image =>`<div style="display: flex;flex-direction: column;align-items: center;"><img src="${image}" style="height: 200px;margin-right: 20px;"> <span  style="cursor: pointer;">点击图片删除</span></div>`).join('')}</div>`);} catch (error) {console.error(error);res.status(500).send('无法获取图片列表');}
});// 上传图片到图床
app.post('/upload', upload.single('image'), async (req, res) => {try {const { buffer, originalname } = req.file;const encodedFile = buffer.toString('base64');const response = await axios.post('https://gitee.com/api/v5/repos/zsd12138/drawing-bed/contents/image/' + originalname, {access_token: "xxxxxxxxxx",branch: 'master',content: encodedFile,message: `上传图片 ${originalname}`,});res.status(200).send(response.data);} catch (error) {// console.error(error);res.status(500).send('无法上传图片');}
});// 删除图床上的图片
app.get('/delete/:filename', async (req, res) => {const filename = req.params.filename;try {// 获取shaconst shaDate = await axios.get('https://gitee.com/api/v5/repos/zsd12138/drawing-bed/contents/image/' + filename + '?access_token=xxxxxxxxxxx');// console.log(shaDate.data.sha)// 删除操作const response = await axios.delete('https://gitee.com/api/v5/repos/zsd12138/drawing-bed/contents/image/' + filename, {params: {access_token: "xxxxxxxxxxxxx",branch: 'master',message: `删除图片 ${filename}`,sha: shaDate.data.sha},});res.status(200).send(`已删除${filename}`);} catch (error) {console.error(error.data);res.status(500).send(`无法删除图片 ${filename}`);}
});// 启动服务器
app.listen(port, () => {console.log(`服务器正在运行，访问 http://localhost:${port}`);
});

access_token替换成自己的私人令牌

index.html

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>图床</title><script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head><body><h2>上传图片</h2><form id="uploadForm"><input type="file" id="fileInput"><button type="submit">上传图片</button></form><h2>所有图片</h2><div id="images"></div><script>$(function () {// 删除图片$('#images').on('click', 'img', function () {const imageUrl = $(this).attr('src');const filename = imageUrl.substring(imageUrl.lastIndexOf('/') + 1);if (confirm(`确定删除 "${filename}"?`)) {$.ajax({url: 'http://172.21.2.52:3000/delete/' + filename,type: 'get',success: () => {// $(this) 表示当前被选中的元素，.remove() 用于从 DOM 中移除元素。// $(this).remove();getIamge()},error: () => {alert('Delete failed.');}});}});})var getIamge = function () {// 获取图床上的所有图片$.ajax({url: 'http://172.21.2.52:3000/',method: 'GET',success: function (html) {$('#images').html(html);},error: function () {console.error('无法获取图片列表');}});}getIamge()// 上传图片到图床$('#uploadForm').submit(function (event) {event.preventDefault(); // 阻止表单的默认提交行为const formData = new FormData();formData.append('image', $('#fileInput')[0].files[0]);console.log($('#fileInput')[0].files[0])$.ajax({url: 'http://172.21.2.52:3000/upload',type: 'POST',data: formData,processData: false,contentType: false,success: function (result) {getIamge()console.log(result);},error: function (error) {console.error(error);}});})</script>
</body></html>

运行效果：全部都302 重定向了，这就是做了防盗链，下面来讲讲防盗链

防盗链

要实现防盗链，就需要知道图片的请求是从哪里发出的。可以实现这一功能的有请求头中的origin和referer。origin只有在XHR请求中才会带上，所以图片资源只能借助referer

通过判断请求的referer，如果请求来源不是本站就返回302

一个完整的流程：

首先请求正常的图片，但是没有返回200，而是302重定向，其中响应头中的location就是要重定向去向的地址；
接着浏览器会自动请求这个location，并用这个返回结果代替第一次请求的返回内容

如何破解防盗链

想让gitee不知道我在盗用，就不能让他发现请求的来源是第三方，只要把referer藏起来就好

代码实现：

//增加到html的头部
<meta name="referrer" content="no-referrer" />

注解：
<meta name="referrer" content="no-referrer" /> 指定了 "no-referrer" 的内容，意味着浏览器在发送请求时不会包含任何引用来源信息。换句话说，当用户从当前网页跳转到其他页面时，新页面接收到的请求中将不包含这个跳转前的页面地址

最后效果图

增加meta头部配置后

附上gitee请求文档：

Gitee API 文档

【node】使用express+gitee搭建图床，并解决防盗链问题

node依赖下载：

app.js代码：

index.html

防盗链

如何破解防盗链

最后效果图

相关文章：

【node】使用express+gitee搭建图床，并解决防盗链问题

蕨型叶分形

DevOps系列文章之 Git知识大全

JVM理论（六）执行引擎--垃圾回收

贪心算法重点内容

基于深度学习的高精度交通信号灯检测系统（PyTorch+Pyside6+YOLOv5模型）

【3D目标检测】DSVT-2023CVPR

我在VScode学Python（Python函数，Python模块导入）

【目标跟踪】1、基础知识

33. 搜索旋转排序数组

接口自动化测试要做什么？8个步骤讲的明明白白（小白也能看懂系列）

Flutter 自定义虚线分割线

Java毕业设计—爱宠医院管理系统设计与实现

AI时代带来的图片造假危机，该如何解决

【动态规划】简单多状态

科技资讯|苹果计划本月推出Vision Pro头显开发套件，电池有重大更新

k8s 将pod节点上的文件拷贝到本地

Git简介与工作原理：了解Git的基本概念、版本控制系统和分布式版本控制的工作原理

java篇类的进阶0x02：方法重载

Android11 相机拍照权限，以及解决resolveActivity返回null

深入浅出：JavaScript 中的 `window.crypto.getRandomValues()` 方法

React Native在HarmonyOS 5.0阅读类应用开发中的实践

【SQL学习笔记1】增删改查+多表连接全解析（内附SQL免费在线练习工具）

ffmpeg（四）：滤镜命令

BCS 2025｜百度副总裁陈洋：智能体在安全领域的应用实践

【RockeMQ】第2节｜RocketMQ快速实战以及核⼼概念详解（二）

【OSG学习笔记】Day 16: 骨骼动画与蒙皮（osgAnimation）

python执行测试用例，allure报乱码且未成功生成报告

JS手写代码篇----使用Promise封装AJAX请求

搭建DNS域名解析服务器(正向解析资源文件)