Angular调用API时URL双引号被编码，如何保留原生双引号

• 字符串拼接逻辑错误：你在代码里写的'"${value}"'，实际生成的内容是单引号包裹双引号的结构（比如'"una"'），完全不符合预期的纯双引号包裹的JSON值格式，这就是编码后出现%27（单引号的URL编码值）的直接来源。
• HttpClient默认编码行为：filters参数被直接拼到URL字符串中时，框架会对所有特殊字符做标准URL编码，把双引号、空格等字符转成对应的百分号编码，最终导致双引号变成%22。

方案1：使用HttpParams传参，修正JSON构造逻辑 #

彻底放弃手动拼URL字符串的写法，直接构造合法的JSON对象，序列化后作为查询参数传入：

// 构造结构正确的过滤参数
const filterList = [
  {
    value: value,
    field: column,
    sort: sort,
    op: filter
  }
];
// 序列化JSON，构造HttpParams
const requestParams = new HttpParams({
  fromObject: {
    filters: JSON.stringify(filterList)
  }
});
// 发起请求
return this.http
  .get(this.env.HELPDESK_LIST_FILTER, { params: requestParams })
  .pipe(map(data => data));

如果后端要求接收未转义的双引号值，可自定义HttpParams的编码器，跳过默认的转义逻辑：

const requestParams = new HttpParams({
  fromObject: {
    filters: JSON.stringify(filterList)
  },
  // 自定义编码规则，直接返回原值不做转义
  encoder: {
    encode: (val: string) => val,
    encodeKey: (key: string) => key,
    encodeValue: (val: any) => String(val)
  }
});

方案2：直接拼接完整目标URL #

如果不需要用到HttpParams的能力，可以直接拼出符合预期的完整请求地址，绕开框架的自动编码流程：

// 直接生成和预期完全一致的URL
const targetUrl = `${this.env.HELPDESK_LIST_FILTER}?filters=${JSON.stringify([{
  value,
  field: column,
  sort,
  op: filter
}])}`;
return this.http
  .get(targetUrl)
  .pipe(map(data => data));

• 拼接字符串时不要嵌套多余的单引号，之前的写法本质是生成了被单引号包裹的双引号内容，本身就不是合法的JSON结构。
• 按照HTTP标准，查询参数中的双引号是合法传输字符，后端只要做一次URL解码就能正常解析JSON结构，不需要为了适配后端刻意修改JSON格式。

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