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

这篇具有很好参考价值的文章主要介绍了【node】使用express+gitee搭建图床,并解决防盗链问题。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

【node】使用express+gitee搭建图床,并解决防盗链问题,Javascript与ES6~,html5 && css3 && 浏览器,express,gitee

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

【node】使用express+gitee搭建图床,并解决防盗链问题,Javascript与ES6~,html5 && css3 && 浏览器,express,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 {
    // 获取sha
    const 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 重定向了,这就是做了防盗链,下面来讲讲防盗链

【node】使用express+gitee搭建图床,并解决防盗链问题,Javascript与ES6~,html5 &amp;&amp; css3 &amp;&amp; 浏览器,express,gitee

防盗链

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

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

一个完整的流程:

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

【node】使用express+gitee搭建图床,并解决防盗链问题,Javascript与ES6~,html5 &amp;&amp; css3 &amp;&amp; 浏览器,express,gitee

如何破解防盗链

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

代码实现:

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

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

其他:

<meta http-equiv="Content-Security-Policy" content="frame-src 'self'  https://open.ys7.com  http://bs.nifengss.com">

最后效果图

增加meta头部配置后 

【node】使用express+gitee搭建图床,并解决防盗链问题,Javascript与ES6~,html5 &amp;&amp; css3 &amp;&amp; 浏览器,express,gitee

附上gitee请求文档:

Gitee API 文档文章来源地址https://www.toymoban.com/news/detail-605926.html

到了这里,关于【node】使用express+gitee搭建图床,并解决防盗链问题的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • gitee+picgo+typora图床搭建

    gitee+picgo+typora图床搭建 1.安装typora 官网下载直接安装:https://www.typora.io/#download 2.编辑typora图像设置 打开 文件 - 偏好设置 - 图像 设置 插入图片时 选择 上传图片 设置 上传服务 为 PicGo-Core(command line) 3.为typora安装PicGo-Core 点击按钮 下载或更新 , PicGo-Core 会自动安装到 Typora 安

    2024年02月03日
    浏览(43)
  • Gitee + Typora,搭建你的免费高速图床

    一个 Gitee 账号 是的,就这么简单,只要你有一个 Gitee 账号就够了,你就能拥有一个免费的图床了,如果你还没有,那赶紧出门去 注册 一个账号吧。 3. 搭建过程 接下来就是正式开始搭建过程了,准备好大干一场吧! 登录你的 Gitee 之后,创建一个新的仓库; 填写仓库先关资

    2024年04月17日
    浏览(41)
  • 【工具使用】Gitee+PicGo实现图床 快速上传本地md文件至博客(非常稳定)

    为了可以非常方便的将本地写好的md笔记直接复制粘贴到博客中, 解决方案是:图片放到服务器上,md文件直接请求服务器上的图片 ,这样可以直接复制所有md内容至网上发布,而不需要再单独上传图片。 实现方案:图床 为了可以非常方便的将本地写好的md笔记直接复制粘贴

    2024年02月02日
    浏览(42)
  • node基于express+mongodb项目的整体结构搭建和逻辑抽离

    这是我用express实现的一个缩减版的注册功能,如下: app.js 目录结构如下: 可以看到的是所有的逻辑,创建服务器、链接数据库、创建集合、注册都在app.js文件中,这只是一个简单的注册功能,可能看上去还不是很乱,但是当我们后面项目越来越大,所做的功能越来越多,显

    2024年02月16日
    浏览(34)
  • 在PicGo上使用github图床解决typora上传csdn图片不显示问题(保姆级教程)

    原因:采用电脑截图的方式粘贴到 typora 上的图片形式只能在自己电脑上看到,在 csdn 上显示不了,因为这个图片形式是用的图片的 绝对路径 ,在你电脑上可以找得到,上传到 csdn 后,在 csdn 服务器中就找不到你这个路径。 解决办法:在 PicGo 上使用 github 图床( gitee 图床也

    2024年02月08日
    浏览(50)
  • 作为前端leader,如何搭建属于我们公司自己的流水线自动化部署系统(node+express)

    背景:自动化部署系统主要可以集成到公司内部的管理系统中去,比如公司有多个项目,移动端H5,大屏网站,门户网站等...每次发布或者迭代都需要前端同事打包然后在交给运维或者后端同事放到服务器上进行部署 ,如果有一个项目多个同事合作完成 还要走git合并流程,

    2024年02月19日
    浏览(52)
  • Node中express路由基本使用

    说明:采用:id形式 说明:根据输入id不同,展示不同的名字  

    2024年02月12日
    浏览(51)
  • node+vue+express开发环境下接口数据传递中的跨域问题

    大部分浏览器自带的保护措施,限制用户在一个域名下请求另一个域名的数据 跨域对于前后端开发者来说,就像一块狗皮膏药,无论是面试还是开发中,都会经常遇到。 之所以出现跨域问题,是因为浏览器的同源策略,为了隔离潜在的恶意文件,为了防御来自歪门邪道的攻

    2024年02月19日
    浏览(38)
  • Node.js-Express框架基本使用

    Express是基于 node.js 的web应用开发框架,是一个封装好的工具包,便于开发web应用(HTTP服务) 中间件(Middleware):是一个回调函数,像路由一样可以访问请求对象(request, response). 作用:使用函数封装公共操作,简化代码。 全局中间件 路由中间件 静态资源中间件 注意事项 1、

    2024年02月12日
    浏览(56)
  • 使用腾讯云对象存储搭建图床

    平常在学习一些东西或者研究一些东西的时候会整理一下然后发到博客网站上,然后编辑时候一般使用的都是markdown格式,然后图片的存储有时候就很闹心,开始用的公共图床,但是没几天不是图片失效了就是图床网站倒闭了,然后现在很多网站都加限制防外链的。就想着自

    2024年02月08日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包