Angular前端传递斜杠(/)作为搜索值时的URL双斜杠报错问题解决

问题根因 #

当前的接口拼接逻辑是直接拿用户输入的搜索值和基础路径做字符串拼接，完全未做特殊字符的URL合规处理。斜杠本身是URL定义中的路径分隔符，被直接拼进路径的时候会打断原本的路径结构，最终形成连续双斜杠的非法路径，后端解析路由时自然就会调用失败。

可落地的解决方式 #

• 对搜索关键词做强制URL编码，禁止直接裸拼到路径里
  拼接口路径的时候，不要把用户输入的原始搜索值直接接在基础路径后面，要用encodeURIComponent()把关键词做全量编码。这个方法会把斜杠、问号、井号这类URL保留字符转成对应的编码值（比如斜杠会转成%2F），从根源上避免特殊字符被后端识别成路径分隔符。

  踩坑提醒：别用encodeURI()处理参数值，这个方法不会给斜杠这类保留字符编码，解决不了当前的双斜杠问题。

• 调整搜索参数的传递位置，减少路径拼接的出错可能
  如果后端没有强制要求搜索参数必须放在路径段里，可将带特殊字符的搜索关键词挪到Query参数中传递。比如把原来的拼接路径/app/{searchKey}改成/app?searchKey={searchKey}，从结构上避免用户输入的内容直接打乱路径层级。
  要是后端接口硬要求搜索参数必须放路径段，一定要配合前述的编码逻辑处理参数，绝对不能直接把用户输入的内容透传到路径里。
• 配置全局HTTP拦截器做异常兜底
  在Angular的全局HttpInterceptor里加一段URL校验逻辑：请求发出之前，先把协议头（http:///https://）部分摘出来，剩下的路径段里如果出现连续多段斜杠，就替换成单个斜杠，拼成合法的路径再发请求。这层防护能避免个别业务代码漏做参数编码的时候，直接导致接口调用失败。

避坑提醒 #

别图省事直接把用户输入里的斜杠删掉、替换成别的字符，这种操作会直接篡改用户本来要搜索的内容，最终输出的搜索结果根本不符合用户预期。正确的处理方式是把特殊字符做编码保留语义，而非修改用户的输入内容。

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