Angular API调用时URL自动添加%E2%80%8B零宽空格问题如何解决

%E2%80%8B是*零宽度空格（ZWSP）*的URL编码，属于肉眼不可见的控制字符，不会在常规代码编辑场景下显示，出现该问题的核心原因是参与URL拼接的字符串片段中自带该隐藏字符，常见来源如下：

• 复制粘贴BaseUrl、接口路径片段时，从在线文档、Office文档、网页内容中带入了隐藏的零宽度空格
• 项目配置文件（如environment.ts、proxy.conf.json）中定义的路径字符串首尾/中间意外插入了该字符
• 动态拼接URL时使用的变量（如从本地存储、后端接口返回的配置字段中取的路径参数）自带该隐藏字符

定位问题位置 #

首先确认零宽度空格的存在位置：

1. 开启编辑器的控制字符渲染功能，以VS Code为例：在设置中搜索editor.renderControlCharacters，将其设为true，此时打开配置文件就能直接看到显示为·的零宽度空格
2. 运行代码检测拼接后的URL是否包含该字符：

const targetUrl = '你的拼接后完整接口地址';
// 检测是否存在零宽度空格
console.log('是否包含ZWSP：', targetUrl.includes('\u200B'));
// 打印具体出现的位置
targetUrl.split('').forEach((char, index) => {
  if (char.charCodeAt(0) === 0x200B) {
    console.log(`零宽度空格出现位置：索引${index}`);
  }
});

对应修复操作 #

• 若问题出在静态配置的字符串中：直接删除整段路径字符串，手动逐字重新输入，不要使用复制粘贴操作
• 若问题出在动态拼接的变量中：对所有参与URL拼接的字段统一添加隐藏字符过滤逻辑：

// 通用过滤方法，可清除零宽度空格及其他常见不可见控制字符
const cleanUrlStr = (str: string) => str.replace(/[\u200B-\u200D\uFEFF]/g, '');

// 拼接URL时调用
const requestUrl = `${cleanUrlStr(environment.baseUrl)}/${cleanUrlStr(controller)}/${cleanUrlStr(method)}`;

• 若项目用了HTTP拦截器统一拼接BaseUrl：在拦截器逻辑中对传入的请求URL和配置的BaseUrl都做上述过滤处理即可

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