Angular HttpClient调用第三方API时查询字符串双引号编码问题

背景 #

我需要调用第三方API，要求在URL末尾传递这样的查询参数：

?query="status:2 OR status:3"

用Postman发送GET请求完全正常，但在Angular中实现调用时始终报错。

尝试过的代码及问题 #

第一种写法：

q = 'query="'+ encodeURI(filterQuery)+'"';
let url = `${this.apiUrl}/api/?${q}`;
return this.httpClient.get<Item[]>(url, this.httpOptions);

在Chrome开发者工具中看到实际请求的参数变成了：

?query=%22status:2%20OR%20status:3%22

请求返回错误，推测是双引号被额外编码，甚至存在双重编码的问题。

编辑补充：
怀疑是HttpClient自动编码导致的问题，哪怕直接写死URL也无法正常请求：

let url = `${this.apiUrl}/api/?query="status:2 OR status:3"`;
return this.httpClient.get<Item[]>(url, this.httpOptions);

API文档明确要求 #

查询必须进行URL编码
查询字符串必须用一对双引号包裹，且长度最多为512字符

解决方案 #

推荐方法：用HttpParams构建查询参数 #

Angular的HttpClient会自动处理参数的正确编码，不要手动拼接URL，改用HttpParams来构建参数，代码如下：

const filterQuery = 'status:2 OR status:3';
// 先给查询内容加上双引号，再作为query参数的值传入
const params = new HttpParams().set('query', `"${filterQuery}"`);

return this.httpClient.get<Item[]>(`${this.apiUrl}/api/`, {
  ...this.httpOptions,
  params: params
});

这种方式下，HttpClient会自动对双引号、空格等特殊字符进行符合规范的URL编码，生成的参数格式和Postman发送的一致，不会出现双重编码问题。

备选方法：手动编码后禁用自动编码 #

如果必须手动处理编码，可以用encodeURIComponent对整个带双引号的查询内容编码，再通过HttpParams的fromString传入，同时关闭自动编码避免重复处理：

const filterQuery = 'status:2 OR status:3';
// 给查询内容加双引号后，整体进行URL编码
const encodedQuery = encodeURIComponent(`"${filterQuery}"`);
const params = new HttpParams({
  fromString: `query=${encodedQuery}`,
  encode: false // 禁用自动编码，避免重复处理
});

return this.httpClient.get<Item[]>(`${this.apiUrl}/api/`, {
  ...this.httpOptions,
  params: params
});

问题根源说明 #

之前的写法出错，核心是手动编码+HttpClient自动编码导致了双重编码：比如你用encodeURI把空格转成%20，HttpClient会把%再编码成%25，最终参数变成query=%22status:2%2520OR%2520status:3%22，这完全不符合API的解析要求。交给HttpParams处理就能避免这个问题。

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