Nuxt2中如何通过redirect-module在onDecodeError时重定向路由

我有一个基于Nuxt2构建的项目，目前在Sentry上收到大量URI Malformed错误，这些错误来自末尾带有%2的有效路由，该字符导致了解码错误。我需要在解码出错时移除%2并将用户重定向到修正后的路由，请问该如何实现？

我尝试了以下代码：

onDecode: (req, res, next) => decodeURI(req.url),
onDecodeError: (error, req, res, next) => {
    if (/^.*(%2)$/.test(req.url)) {
        res.setHeader('Location', encodeURI(req.url.slice(0, -2)))
    } else {
        next(error)
    }
},

在Nuxt2中可通过自定义服务器中间件处理该URI解码错误，以下是可靠的实现方式：

修正原有代码的问题 #

你之前的代码存在两个关键问题：

• 用encodeURI处理修正后的URL会导致原有合法编码被二次编码，破坏路由结构
• 未发送重定向状态码，浏览器无法触发跳转行为

正确实现代码 #

在nuxt.config.js的server.middleware中添加自定义中间件：

// nuxt.config.js
export default {
  server: {
    middleware: [
      (req, res, next) => {
        try {
          // 尝试解码URL，无错误则正常继续
          decodeURI(req.url);
          next();
        } catch (error) {
          // 匹配末尾带有%2的异常路由
          if (/(%2)$/.test(req.url)) {
            // 移除末尾的%2，保留原有合法编码
            const correctedUrl = req.url.slice(0, -2);
            // 发送301永久重定向（如需临时重定向可改用302）
            res.writeHead(301, { Location: correctedUrl });
            res.end();
          } else {
            // 其他解码错误，交由后续中间件处理
            next(error);
          }
        }
      }
    ]
  }
}

实现说明 #

• 直接在服务器中间件捕获解码错误，比依赖Nuxt内置的onDecodeError兼容性更好，覆盖更多请求场景
• 使用writeHead发送明确的重定向状态码，确保浏览器正确执行跳转
• 不对修正后的URL做多余编码，避免破坏原有合法的URI编码规则

若你使用express或connect作为Nuxt的底层服务器，也可将这段逻辑封装为独立中间件文件，放在server/middleware目录下，再在nuxt.config.js中引入使用。

内容的提问来源于stack exchange，提问作者Mostafa Said