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 正在监听中...");
});