Angular依赖Vite库引发的URI格式错误问题

问题详情 #

通过ng new url-test-app创建Angular 17.3.9项目，执行npm start启动后访问http://localhost:4200完全正常。但当访问带查询参数的地址http://localhost:4200/?testParam=test%_24Q3时，直接抛出以下错误：

URI malformed  
    at decodeURI (<anonymous>)  
    at viteTransformMiddleware (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:63436:19)  
    at call (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42750:7)  
    at next (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42694:5)  
    at viteHMRPingMiddleware (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:64700:13)  
    at call (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42750:7)  
    at next (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42694:5)  
    at next (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42672:14)  
    at viteCachedTransformMiddleware (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:63421:9)  
    at call (file:///D:/angular/url-test-app/node_modules/vite/dist/node/chunks/dep-k5wXcrSr.js:42750:7)

且该错误无法通过Angular内置的错误处理器捕获处理。

问题原因 #

1. 无效的URL编码：%_不符合URI规范——URI中%必须后跟两位十六进制字符（0-9、A-F），%_不满足要求，导致decodeURI函数抛出错误。
2. 错误发生时机：该错误由Vite的中间件在处理请求时抛出，此时Angular应用尚未完成初始化，因此Angular的错误处理器无法捕获这个阶段的错误。

解决方案 #

方案1：修正查询参数的编码格式 #

如果参数值本身需要包含%，需将%正确编码为%25。例如原参数test%_24Q3应改为test%25_24Q3，对应的访问地址为：
http://localhost:4200/?testParam=test%25_24Q3

方案2：在Vite中添加自定义中间件捕获错误 #

修改项目根目录下的vite.config.ts，添加自定义中间件提前处理无效URI，避免错误中断请求：

import { defineConfig } from 'vite';
import angular from '@angular-devkit/build-angular/src/vite/index';

export default defineConfig({
  plugins: [angular()],
  server: {
    middleware: {
      setup: (app) => {
        app.use((req, res, next) => {
          try {
            if (req.url) {
              decodeURI(req.url);
            }
            next();
          } catch (err) {
            res.writeHead(400, { 'Content-Type': 'text/plain' });
            res.end('Invalid URI format');
          }
        });
      }
    }
  }
});

重启项目后，遇到无效URI时会返回自定义的400响应，而非直接抛出未处理的错误。

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