在Nuxt3中捕获Vite抛出的格式错误URI异常并跳转404

当请求包含%91这类无效URI编码的链接时，错误发生在Vite的viteTransformMiddleware执行阶段，早于Nuxt的常规路由处理和错误捕获逻辑，所以常规方案无法拦截。以下是可行的解决办法：

方案：使用Server Middleware提前拦截无效URI #

Server Middleware会在Nuxt核心路由处理和Vite中间件之前执行，能提前捕获URI解码错误：

1. 在项目根目录创建server/middleware/uri-validator.ts（或.js）文件，写入以下代码：

export default defineEventHandler((event) => {
  const rawPath = getRequestURL(event).pathname;
  try {
    decodeURI(rawPath);
  } catch (err) {
    if (err instanceof URIError) {
      // 重定向到404页面
      return sendRedirect(event, '/404', 301);
      // 若不需要重定向，直接返回404响应：
      // event.node.res.statusCode = 404;
      // return { statusCode: 404, message: 'Invalid URI' };
    }
    // 非URI错误继续抛出
    throw err;
  }
});

2. 重启Nuxt服务后，当请求包含无效URI编码的链接时，该中间件会优先捕获URIError，并将用户重定向到404页面。

为什么之前的方案无效？ #

• 常规Nuxt路由中间件：执行时机晚于Vite的URI解码步骤，错误已经抛出，无法拦截。
• Nuxt官方错误处理（如error.vue、useError）：仅能捕获Nuxt路由处理阶段及之后的错误，无法触及Vite中间件层面的报错。

内容的提问来源于stack exchange，提问作者Antonio Lok