网站建设的分工,开锁行业在58做网站有活吗,希爱力的功效及副作用,钢筋网片150x150一个平方多少吨URL 特殊字符 400 异常
笔者之前在写后端或者前端时#xff0c;在处理表单时#xff0c;经常有对特殊字符的检验处理#xff0c;但自己也不清楚为什么要这么做#xff0c;浅浅地以为可能是特殊字符不好看或者存取可能会造成异常#xff1f;不过一直没遇到过问题#xff…URL 特殊字符 400 异常
笔者之前在写后端或者前端时在处理表单时经常有对特殊字符的检验处理但自己也不清楚为什么要这么做浅浅地以为可能是特殊字符不好看或者存取可能会造成异常不过一直没遇到过问题也就不在意这了。
巧的是昨天在实习公司测试小姐姐居然给我提了一个关于特殊字符异常的BUG我就那了闷了头一回见这种异常不过做过了解后才发现不是什么疑难杂症一起来看看吧。
问题情景
开发环境reactumiant design pro
某系统创建任务阶段在键入任务名字时输入 “[” 字符时会弹出 400 异常。
对于任务名字后端提供了一个检验重名的 GET 接口这个 bug 是请求检验重名出了错。
前端检验重名的相关代码
ProFormText//...rules{[{ validator: validators.taskName }]}widthlgnametaskNameplaceholder请输入任务名称/const validator {taskName: (value) {// 调用检验重名接口 - GETfetchTaskNameValid({taskId: queryParams.taskId,taskName: value,).then(res {//...})}
}问题分析
在键入时就报了异常是因为没有设置校验时机为 “onSubmit”而是默认的 “onChange”输入 “[” 报了异常显然和 “[” 字符有关[ 本身也不算多少特殊的字符但问题在于后端给的那个接口的请求方式是 GET任务名字是在 URL 路径中传输的问题就在这了也许大家平常不会过多的关注 url 路径长什么样但肯定注意到过中文在 URL 路径中是被转换成 “%xxxx” 的形式传输的其实 “[” 之类的字符也是同样的道理如果不进行转换直接传输这些特殊的字符就违背的 URL 的语法规则自然就会异常了。
解决方案
修正检验的触发时机调整为 “onSubmit”
ProFormText//...rules{[{ validator: validators.taskName, validateTrigger: onSubmit }]}widthlgnametaskNameplaceholder请输入任务名称/转义处理任务名中的特殊字符 我如何知道哪些字符是特殊的呢它们应该被转换成怎么样的字符我一开始也是傻乎乎的一个个去查看特殊字符和它们的编码并手动转换这其实不用我们去关系Js 直接提供了编码字符串为合法 URL 的方法encodeURL
taskName: encodeURL(value),这样就可以了任务名中的特殊字符被转义了不过更规范的做法不是直接处理任务名而是应该在封装 Api 的时候就对 URL 字符串进行转换后再请求。
话说 umi 内置的 request 怎么不主动在请求前 encodeURL 一下路径作为框架的使用者不应该需要额外处理这个问题就跟某些 orm 框架不默认给表名加上反引号一样太不贴心了
