Angular 4查询字符串参数自动转为小写问题求助

我之前处理过类似的Angular 4项目问题，大概率是这几个地方的配置或者代码逻辑导致查询字符串里的大写字符被自动转成小写，给你一步步排查和解决的方法：

1. 检查自定义URL序列化器 #

Angular的路由默认不会修改查询参数的大小写，但如果项目中自定义了UrlSerializer来处理URL格式，可能不小心加了转小写的逻辑。

打开你的根模块（比如app.module.ts），看看有没有类似这样的提供者配置：

@NgModule({
  providers: [
    { provide: UrlSerializer, useClass: CustomUrlSerializer }
  ]
})

如果有，打开CustomUrlSerializer类，检查serialize或parse方法里是否存在把参数值转成小写的代码（比如.toLowerCase()），去掉这部分逻辑即可。

2. 排查HTTP拦截器 #

如果你的项目用了HttpInterceptor统一处理请求，有些拦截器可能会为了规范参数名或值，统一转成小写。

找到拦截器的代码，检查是否有类似这样的逻辑：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const modifiedParams = req.params.keys().reduce((params, key) => {
    // 这里如果对参数值调用了toLowerCase()就会导致大写丢失
    return params.set(key, req.params.get(key).toLowerCase());
  }, new HttpParams());
  const modifiedReq = req.clone({ params: modifiedParams });
  return next.handle(modifiedReq);
}

如果发现有对参数值转小写的操作，删除.toLowerCase()即可保留原始大小写。

3. 确认查询参数的传递方式 #

如果是通过router.navigate传递查询参数，确保代码没有手动转小写：

// 正确的写法，保留原始token的大小写
this.router.navigate(['/create-password'], {
  queryParams: { resettoken: 'CfDJ8KiDnr7aa31ChHccXvdxPQt...' }
});

如果是手动拼接URL，一定要用encodeURIComponent正确编码参数值，避免编码错误导致的大小写异常：

const rawToken = 'CfDJ8KiDnr7aa31ChHccXvdxPQt...';
const encodedToken = encodeURIComponent(rawToken);
const targetUrl = `/create-password?resettoken=${encodedToken}`;
// 再进行导航或请求操作

4. 排除服务器端影响 #

如果以上排查都没问题，可以临时在浏览器的开发者工具里查看请求的URL，确认Angular发送的原始请求里参数值是大写的。如果原始请求没问题，那可能是服务器端接收时做了转小写处理，这时候需要检查后端代码。

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