Angular 15调用API遇404错误：URL含多余空格问题排查

算力阿峰

2026-8-5

问题分析与解决

问题根源

请求URL中出现的%20是空格的URL编码，说明在生成api/products路径时，api和products之间被加入了多余空格。问题出在你HttpClient服务中调用的this.url(requestParameter)方法——这个方法负责拼接URL，但拼接过程中没有处理字符串的前后空格，或者拼接逻辑本身引入了空格。

排查与修复步骤

1. 定位问题点

在HttpClient服务的post方法中添加日志，打印生成的URL，确认空格是在this.url方法中引入的：

post<T>(requestParameter: Partial<RequestParameters>, body: Partial<T>): Observable<T> {
    let url: string = "";

    if (requestParameter.fullEndPoint)
      url = requestParameter.fullEndPoint;
    else {
      const generatedUrl = this.url(requestParameter);
      console.log("生成的URL：", generatedUrl); // 查看控制台输出是否带空格
      url = generatedUrl;
    }

    return this.httpClient.post<T>(url, body, { headers: requestParameter.headers });
}

2. 修复URL拼接逻辑

找到this.url方法的实现，对所有参与拼接的字符串（如baseUrl、controller、action）进行trim()处理，去除前后空格：

private url(params: Partial<RequestParameters>): string {
    // 假设你的基础URL是固定或从配置获取，这里为示例逻辑
    const baseUrl = (params.baseUrl || "https://localhost:7235/api").trim();
    const controller = params.controller ? `/${params.controller.trim()}` : "";
    const action = params.action ? `/${params.action.trim()}` : "";

    // 拼接时避免引入多余空格
    return `${baseUrl}${controller}${action}`;
}