Angular 18中HttpClient在URL查询参数前添加斜杠的问题

问题场景 #

使用Angular 18发送GET请求时，无论通过HttpParams拼接查询参数还是直接字符串拼接URL，最终生成的请求地址都会在/api/analytics路径末尾自动添加斜杠，变成http://127.0.0.1:5000/api/analytics/?page=1&limit=10。

服务代码示例 #

export class ClinicAnalyticsService {

  private routeBase : string = `${environment.apiBase}/api/analytics`

  constructor(private http: HttpClient) { }

  getAll = (page: number) : Observable<ClinicService> => 
    this.http.get(`${environment.apiBase}/api/analytics`, {
      params: new HttpParams()
        .set('page', page)
        .set('limit', 10)
    }).pipe(
      map(({data}: any) => ({
          ...data,
          count: data.count,
          analytics : data.analytics.map((clinic: any) => ({...clinic, page}))
        })
      )
    )

尝试的字符串拼接方式 #

`${this.routeBase}?page=${page}&limit=10`

原因解析 #

这个现象是Angular HttpClient内置的URL规范化机制导致的：

• HttpClient会自动对请求URL进行标准化处理，其中包含在路径末尾与查询参数之间添加斜杠的逻辑，确保URL符合RFC标准格式。
• 如果environment.apiBase的末尾本身带有斜杠（比如http://127.0.0.1:5000/），拼接/api/analytics后会形成//api/analytics，HttpClient在规范化时会合并重复斜杠，并在路径末尾补加斜杠，最终出现/api/analytics/?的结构。

解决方法 #

1. 规范基础URL拼接 #

检查environment.apiBase的配置，确保其末尾不带斜杠（比如设置为http://127.0.0.1:5000），然后路由基础路径保持/api/analytics，这样拼接后的基础URL不会出现重复斜杠，HttpClient规范化时不会额外添加末尾斜杠。

2. 自定义URL序列化器 #

创建自定义序列化器覆盖默认行为，移除末尾斜杠：

import { DefaultUrlSerializer, UrlSerializer, UrlTree } from '@angular/router';

export class NoTrailingSlashUrlSerializer extends DefaultUrlSerializer {
  override parse(url: string): UrlTree {
    return super.parse(url.replace(/\/$/, ''));
  }

  override serialize(tree: UrlTree): string {
    return super.serialize(tree).replace(/\/$/, '');
  }
}

在根模块中注册该序列化器：

@NgModule({
  // ...其他配置
  providers: [
    { provide: UrlSerializer, useClass: NoTrailingSlashUrlSerializer }
  ]
})
export class AppModule { }

3. 手动处理URL字符串 #

拼接完成后手动移除路径末尾与查询参数之间的斜杠：

const rawUrl = `${this.routeBase}?page=${page}&limit=10`;
const processedUrl = rawUrl.replace(/\/(?=\?)/, '');
return this.http.get(processedUrl).pipe(/* ... */);

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