H3初识——入门介绍之常用中间件
简介
H3 是 Nuxt 3 和 Nitro 的核心 HTTP 框架,提供了极简且高效的中间件机制。中间件(Middleware)是指在请求到达最终处理函数(Handler)之前,依次执行的一系列函数。它们可以用于处理认证、日志、错误处理、请求解析等通用逻辑。
特点
- 极简 API:中间件的编写和使用非常简单,易于上手。
- 高性能:基于现代 Node.js 特性,性能优异。
- 灵活组合:支持多个中间件串联,按顺序依次执行。
- 类型安全:TypeScript 支持良好,开发体验佳。
- 与 Nuxt/Nitro 深度集成:可无缝用于 Nuxt 3、Nitro 项目。
示例
基础示例
定义中间件
// middleware/logger.js
export default (req, res, next) => {console.log(`[${new Date().toISOString()}] ${req.method} ${req.url}`);next();
};
在 H3 应用中注册:
import { H3 } from "h3";
import logger from "./middleware/logger";const app = new H3();app.use(logger);app.use("/hello", (req, res) => {res.end("Hello World");
});serve(app, { port: 3000 });
条件使用:可以根据路径、方法等条件灵活应用
app.use("/api", apiMiddleware);
app.use("/admin", adminAuthMiddleware);
常见应用场景
- 认证与权限校验
- 日志记录
- 请求体解析
- 错误统一处理
- CORS 处理
参考链接
- H3 官方中文文档
中间件
响应时间
app.use(async (event, next) => {const start = Date.now();await next();const end = Date.now();console.log(`Response time: ${end - start}ms`);
});
统一响应头
app.use((event, next) => {event.res.headers.set("Content-Type", "application/json; charset=utf-8");return next();
});
访问统计
app.use(async (event, next) => {const url = event.req.url;const statsFile = "logs/stats.json";let stats = {};try {stats = JSON.parse(await readFile(statsFile, "utf-8"));} catch {}stats[url] = (stats[url] || 0) + 1;await writeFile(statsFile, JSON.stringify(stats, null, 2));return next();
});
跨域(CORS)
app.use((event, next) => {event.res.headers.set("Content-Type", "application/json; charset=utf-8");event.res.headers.set("Access-Control-Allow-Origin", "*");event.res.headers.set("Access-Control-Allow-Methods","GET,POST,PUT,DELETE,OPTIONS");event.res.headers.set("Access-Control-Allow-Headers","Content-Type,Authorization");// 预检请求直接返回if (event.req.method === "OPTIONS") {return "";}return next();
});
禁止某些 UA 访问
app.use((event, next) => {const ua = event.req.headers.get("user-agent") || "";if (ua.includes("curl") || ua.includes("python")) {event.res.statusCode = 403;return { code: 403, message: "禁止访问" };}return next();
});
禁用指定 IP 访问
const blacklist = ["1.2.3.4", "5.6.7.8"];
app.use((event, next) => {const ip =event.req.headers.get("x-forwarded-for") || event.req.socket.remoteAddress;if (blacklist.includes(ip)) {event.res.statusCode = 403;return { code: 403, message: "IP被禁止访问" };}return next();
});
国际化(i18n)
const messages = {zh: { welcome: "欢迎" },en: { welcome: "Welcome" },
};
app.use((event, next) => {const lang = event.req.headers.get("accept-language")?.split(",")[0].toLowerCase().startsWith("zh")? "zh": "en";event.t = (key) => messages[lang][key] || key;return next();
});
// 用法:handler里 return { msg: event.t("welcome") }
接口缓存
const cache = new Map();
app.use(async (event, next) => {if (event.req.method === "GET") {const key = event.req.url;if (cache.has(key)) {return cache.get(key);}const result = await next();cache.set(key, result);setTimeout(() => cache.delete(key), 10 * 1000); // 缓存10秒return result;}return next();
});
H3初识——入门介绍之中间件 - 高质量源码分享平台-免费下载各类网站源码与模板及前沿动态资讯