【踩坑纪实】URL 特殊字符 400 异常

URL 特殊字符 400 异常

笔者之前在写后端或者前端时，在处理表单时，经常有对特殊字符的检验处理，但自己也不清楚为什么要这么做，浅浅地以为可能是特殊字符不好看或者存取可能会造成异常？不过一直没遇到过问题，也就不在意这了。

巧的是，昨天在实习公司，测试小姐姐居然给我提了一个关于特殊字符异常的BUG，我就那了闷了，头一回见这种异常，不过做过了解后，才发现不是什么疑难杂症，一起来看看吧。

问题情景

开发环境：react，umi，ant design pro

某系统，创建任务阶段，在键入任务名字时，输入 "[" 字符时会弹出 400 异常。

对于任务名字，后端提供了一个检验重名的 GET 接口，这个 bug 是请求检验重名出了错。

前端检验重名的相关代码：

<ProFormText
  //...
  rules={[{ validator: validators.taskName }]}
  width="lg"
  name="taskName"
  placeholder="请输入任务名称"
 />

const validator = {
  taskName: (value) => {
  	// 调用检验重名接口 - GET
    fetchTaskNameValid({
      taskId: queryParams.taskId,
      taskName: value,
    ).then(res => {
   	  //...
    })
  }
}

问题分析

1. 在键入时就报了异常，是因为没有设置校验时机为 "onSubmit"，而是默认的 "onChange"
2. 输入 "[" 报了异常，显然和 "[" 字符有关，"[" 本身也不算多少特殊的字符，但问题在于后端给的那个接口的请求方式是 GET，任务名字是在 URL 路径中传输的，问题就在这了，也许大家平常不会过多的关注 url 路径长什么样，但肯定注意到过中文在 URL 路径中是被转换成 "%xxxx" 的形式传输的，其实 "[" 之类的字符也是同样的道理，如果不进行转换直接传输这些特殊的字符，就违背的 URL 的语法规则，自然就会异常了。

解决方案

1. 修正检验的触发时机，调整为 "onSubmit"

<ProFormText
  //...
  rules={[{ validator: validators.taskName, validateTrigger: "onSubmit" }]}
  width="lg"
  name="taskName"
  placeholder="请输入任务名称"
 />

2. 转义处理任务名中的特殊字符
   我如何知道哪些字符是特殊的呢？它们应该被转换成怎么样的字符？我一开始也是傻乎乎的一个个去查看特殊字符和它们的编码并手动转换，这其实不用我们去关系，Js 直接提供了编码字符串为合法 URL 的方法（encodeURL）：

taskName: encodeURL(value),

这样就可以了，任务名中的特殊字符被转义了，不过更规范的做法不是直接处理任务名，而是应该在封装 Api 的时候，就对 URL 字符串进行转换后再请求。

话说 umi 内置的 request 怎么不主动在请求前 encodeURL 一下路径，作为框架的使用者不应该需要额外处理这个问题，就跟某些 orm 框架不默认给表名加上反引号一样，太不贴心了