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中间件(全局中间件、路由中间件、静态资源中间件)

文章目录

前言

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

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


获取请求体数据

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

安装 body-parser 包

javascript 复制代码
npm i body-parser

导入 body-parser 包

javascript 复制代码
const bodyParser = require('body-parser');

获取中间件函数:

javascript 复制代码
const urlParser = bodyParser.urlencoded({extend: false});
const jsonParser = bodyParser.json();

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

javascript 复制代码
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 等第三方工具发)。

javascript 复制代码
<!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 头。

javascript 复制代码
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 中添加如下代码:

javascript 复制代码
<!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 跨域间接帮助防止资源被未授权的网站访问。

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

使用自定义 HTTP 头

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

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

路由模块化

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

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

javascript 复制代码
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 文件,用于存放后台路由。

javascript 复制代码
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() 使用它们。

javascript 复制代码
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

javascript 复制代码
npm i express-generator

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

javascript 复制代码
experss -e express-generator

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

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


总结

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

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


参考资料:

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


相关推荐
belldeep1 小时前
nodejs:express + js-mdict 网页查询英汉词典
nodejs·express·js-mdict
skinGap3 小时前
Node.js 中文编码问题全解析
node.js·jenkins·android-studio
16年上任的CTO1 天前
一文大白话讲清楚webpack进阶——8——Module Federation
前端·webpack·node.js·模块联邦·federation
我命由我123451 天前
Tailwind CSS - Tailwind CSS 引入(安装、初始化、配置、引入、构建、使用 Tailwind CSS)
前端·javascript·css·npm·node.js·js
躲在没风的地方2 天前
vue框架技术相关概述以及前端框架整合
node.js·vue
小韩学长yyds2 天前
前端实战:小程序搭建商品购物全流程
javascript·css·vue.js·小程序·前端框架·node.js·html5
我命由我123452 天前
脚本运行禁止:npm 无法加载文件,因为在此系统上禁止运行脚本
前端·javascript·前端框架·npm·node.js·html·js
一个处女座的程序猿O(∩_∩)O2 天前
npm cnpm pnpm npx yarn的区别
前端·npm·node.js
16年上任的CTO2 天前
一文大白话讲清楚webpack基本使用——18——HappyPack
前端·webpack·node.js·happypack