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

URL 特殊字符 400 异常

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

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

问题情景

开发环境:react,umi,ant design pro

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

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

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

tsx 复制代码
<ProFormText
  //...
  rules={[{ validator: validators.taskName }]}
  width="lg"
  name="taskName"
  placeholder="请输入任务名称"
 />
typescript 复制代码
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"
tsx 复制代码
<ProFormText
  //...
  rules={[{ validator: validators.taskName, validateTrigger: "onSubmit" }]}
  width="lg"
  name="taskName"
  placeholder="请输入任务名称"
 />
  1. 转义处理任务名中的特殊字符
    我如何知道哪些字符是特殊的呢?它们应该被转换成怎么样的字符?我一开始也是傻乎乎的一个个去查看特殊字符和它们的编码并手动转换,这其实不用我们去关系,Js 直接提供了编码字符串为合法 URL 的方法(encodeURL):
typescript 复制代码
taskName: encodeURL(value),

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

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

相关推荐
hj5914_前端新手2 分钟前
javascript基础- 函数中 this 指向、call、apply、bind
前端·javascript
薛定谔的算法6 分钟前
低代码编辑器项目设计与实现:以JSON为核心的数据驱动架构
前端·react.js·前端框架
Hilaku17 分钟前
都2025年了,我们还有必要为了兼容性,去写那么多polyfill吗?
前端·javascript·css
yangcode22 分钟前
iOS 苹果内购 Storekit 2
前端
LuckySusu23 分钟前
【js篇】JavaScript 原型修改 vs 重写:深入理解 constructor的指向问题
前端·javascript
LuckySusu23 分钟前
【js篇】如何准确获取对象自身的属性?hasOwnProperty深度解析
前端·javascript
LuckySusu27 分钟前
【js篇】深入理解 JavaScript 作用域与作用域链
前端·javascript
LuckySusu27 分钟前
【js篇】call() 与 apply()深度对比
前端·javascript
LuckySusu32 分钟前
【js篇】addEventListener()方法的参数和使用
前端·javascript
该用户已不存在34 分钟前
6个值得收藏的.NET ORM 框架
前端·后端·.net