【踩坑纪实】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 框架不默认给表名加上反引号一样,太不贴心了

相关推荐
低代码布道师21 分钟前
第二部分:网页的妆容 —— CSS(下)
前端·css
一纸忘忧27 分钟前
成立一周年!开源的本土化中文文档知识库
前端·javascript·github
涵信1 小时前
第九节:性能优化高频题-首屏加载优化策略
前端·vue.js·性能优化
前端小巷子1 小时前
CSS单位完全指南
前端·css
SunTecTec2 小时前
Flink Docker Application Mode 命令解析 - 修改命令以启用 Web UI
大数据·前端·docker·flink
拉不动的猪3 小时前
前端常见数组分析
前端·javascript·面试
小吕学编程3 小时前
ES练习册
java·前端·elasticsearch
Asthenia04123 小时前
Netty编解码器详解与实战
前端
袁煦丞3 小时前
每天省2小时!这个网盘神器让我告别云存储混乱(附内网穿透神操作)
前端·程序员·远程工作
一个专注写代码的程序媛4 小时前
vue组件间通信
前端·javascript·vue.js