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

Node.js——body-parser、防盗链、路由模块化、express-generator应用生成器

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🎨100个小功能 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js实战 🍒Three.js

🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧

内容参考链接
Node.js(一)Node.js——fs(文件系统)模块
Node.js(二)Node.js——path(路径操作)模块
Node.js(三)Node.js——http 模块(一)
Node.js(四)Node.js——http 模块(二)
Node.js(五)Node.js——express项目搭建、请求、响应
Node.js(六)Node.js——express中间件(全局中间件、路由中间件、静态资源中间件)

文章目录

    • 前言
    • 获取请求体数据
    • 防盗链
      • Referer 头验证
      • 使用 CORS 跨域
      • 使用自定义 HTTP 头
    • 路由模块化
    • Express 应用程序生成器
    • 总结

前言

上篇文章我们认识了中间件的使用及作用。

本篇文章我们学习如何获取请求体数据、防盗链的使用。


获取请求体数据

express 可以使用 body-parser 包处理请求体;它支持多种格式的数据解析,包括JSON、URL编码和文件上传处理。

安装 body-parser 包

npm i body-parser

导入 body-parser 包

const bodyParser = require('body-parser');

获取中间件函数:

const urlParser = bodyParser.urlencoded({extend: false});
const jsonParser = bodyParser.json();

下面,我们设置路由中间件,然后使用 req.body 来获取请求体数据。

const bodyParser = require("body-parser");
const express = require("express");const app = express();// 解析 json 格式的请求体的中间件
const jsonParser = bodyParser.json();
// 解析 querystring 格式请求体的中间件
const urlencodeParser = bodyParser.urlencoded({ extended: false });app.get("/login", (req, res) => {res.sendFile(__dirname + "/index.html");
});// urlencodeParser 执行完毕之后,会往 req 中添加一个 body
app.post("/login", urlencodeParser, (req, res) => {console.log(req.body);res.send("获取用户的数据");
});app.listen(3000, () => {console.log("服务已启动,端口 3000 正在监听中...");
});

index.html 中的内容如下,发送 post 请求(PS:也可以使用 postman 等第三方工具发)。

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><form action="/login" method="post">用户名:<input type="text" name="username" /><br />密码:<input type="text" name="password" /><br /><button>登录</button></form></body>
</html>

在这里插入图片描述

在这里插入图片描述


防盗链

在 Node.js 环境中,防止资源被直接访问(即防盗链)通常涉及到几个关键方面,包括设置HTTP响应头、使用服务器端的访问控制以及可能的客户端验证。

Referer 头验证

在服务器端,检查请求的 Referer 头来验证请求是否来自你的网站。这种方法依赖于客户端正确设置 Referer 头,但这不是100%可靠的,因为用户可以禁用 Referer 头。

const express = require("express");const app = express();app.use((req, res, next) => {let referer = req.get("referer");if (referer) {const url = new URL(referer);const hostname = url.hostname;if (hostname !== "127.0.0.1") {res.status(404).send("Not Found");return;}}next();
});app.use(express.static(__dirname + "/public"));app.listen(3000, () => {console.log("服务已启动,端口 3000 正在监听中...");
});

public/index.html 中添加如下代码:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8" /><meta name="viewport" content="width=device-width, initial-scale=1.0" /><title>Document</title></head><body><p>http://localhost:3000/ => 不显示svg图片</p><p>http://127.0.0.1:3000/ => 显示svg图片</p><img src="http://localhost:3000/images/star.svg" alt="" /></body>
</html>

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述


使用 CORS 跨域

使用 CORS 跨域间接帮助防止资源被未授权的网站访问。

const cors = require('cors');
const app = express();app.use(cors({origin: 'https://yourdomain.com' // 只允许来自此域的请求
}));

使用自定义 HTTP 头

通过设置 X-Frame-Options 头,你可以防止资源被嵌入到其他网站中,这是一种间接的防盗链方法。

app.use((req, res, next) => {res.setHeader('X-Frame-Options', 'SAMEORIGIN'); // 或 'DENY' 来完全禁止嵌入next();
});

路由模块化

实际开发中,路由会有很多种(比如前台路由、后台路由等),我们可以把路由模块化,这样更易于维护、代码也更清晰。

创建 homeRouter.js 文件,用于存放前台路由。

const express = require("express");// 创建路由对象
const router = express.Router();router.get("/home", (req, res) => {res.send("前台首页");
});router.get("/search", (req, res) => {res.send("内容搜索");
});module.exports = router;

创建 adminRouter.js 文件,用于存放后台路由。

const express = require("express");// 创建路由对象
const router = express.Router();router.get("/admin", (req, res) => {res.send("后台首页");
});router.get("/setting", (req, res) => {res.send("后台设置");
});module.exports = router;

在主文件中,引入前台路由和后台路由,并通过 app.use() 使用它们。

const express = require("express");
const homeRouter = require("./routes/homeRouter");
const adminRouter = require("./routes/adminRouter");const app = express();
// 前台路由
app.use(homeRouter);
// 后台路由
app.use(adminRouter);router.get("*", (req, res) => {res.send("Not Found");
});app.listen(3000, () => {console.log("服务已启动,端口 3000 正在监听中...");
});

在这里插入图片描述

在这里插入图片描述


Express 应用程序生成器

通过应用生成器能快速创建一个应用骨架。

安装 express-generator

npm i express-generator

创建名为 express-generator 的应用程序。

experss -e express-generator

之后再 npm i 安装一下依赖,即可得到如下的目录结构。

在这里插入图片描述

终端键入命令 npm start 即可运行应用。

在这里插入图片描述


总结

本篇文章我们学习了 使用 body-parser 获取请求体数据、使用 referer 头验证等方式添加防盗链、拆分路由实现其模块化,使用 express-generator 快速搭建应用等。

好啦,本篇文章到这里就要和大家说再见啦,祝你这篇文章阅读愉快,你下篇文章的阅读愉快留着我下篇文章再祝!


参考资料:

  1. Node.js教程(菜鸟教程)
  2. Node.js零基础视频教程(尚硅谷 · 李强)

在这里插入图片描述


http://www.lryc.cn/news/529835.html

相关文章:

  • 22.Word:小张-经费联审核结算单❗【16】
  • Agent 高频知识汇总:查漏补缺参考大全
  • 本地化部署DeepSeek-R1
  • 验证二叉搜索数(98)
  • StarRocks BE源码编译、CLion高亮跳转方法
  • 数模测评:doubao1.5>deepseek-v3>gpt-o1
  • 晴,初三,年已过
  • Vue3 v-bind 和 v-model 对比
  • Smalltalk语言是何物?面向对象鼻祖Simula的诞生?Simula和Smalltalk有什么区别?面向对象设计?
  • KVM/ARM——基于ARM虚拟化扩展的VMM
  • Windows系统中Docker可视化工具对比分析,Docker Desktop,Portainer,Rancher
  • 【架构面试】二、消息队列和MySQL和Redis
  • 算法【完全背包】
  • 二叉树的遍历
  • 1.31 实现五个线程的同步
  • three.js+WebGL踩坑经验合集(6.1):负缩放,负定矩阵和行列式的关系(2D版本)
  • 【开源免费】基于SpringBoot+Vue.JS体育馆管理系统(JAVA毕业设计)
  • 《大数据时代“快刀”:Flink实时数据处理框架优势全解析》
  • antdesignvue统计数据源条数、计算某列合计值、小数计算不精确多了很多小数位
  • 02.05、链表求和
  • dmfldr实战
  • Kafka 副本机制(包含AR、ISR、OSR、HW 和 LEO 介绍)
  • 爬虫基础(二)Web网页的基本原理
  • 外网访问禅道软件项目管理系统
  • Python 梯度下降法(五):Adam Optimize
  • 笔试-二进制
  • springboot 2.7.6 security mysql redis jwt配置例子
  • FreeRTOS从入门到精通 第十六章(任务通知)
  • TensorFlow 简单的二分类神经网络的训练和应用流程
  • 无人机图传模块 wfb-ng openipc-fpv,4G