共计 1101 个字符,预计需要花费 3 分钟才能阅读完成。
最近在联调接口时发现了一个要命的问题,就是接口 url
明明是正确的,然而发送就是不胜利,报 404 异样的谬误
代码
伪代码如下,一个很失常的删除数据申请
function foo(id) {
return axios({
method: 'delete',
url: '/api/resume/queue/' + id
})
}
报错
报错如下:
这里和后端一起验证过了,的确有这个接口,应用 postman 申请是没问题的
查资料,重复验证
而后本人写了个接口模仿了下,没有重现这个问题,申请其它 api
也都失常
接着就是查各种材料,刚开始一度认为是 delete
申请、vue-cli
的锅,查了各种材料,但还是满载而归
深思
最初看着 DELETE http://localhost:8070/%E2%80%8B/api%E2%80%8B/resume%E2%80%8B/queue%E2%80%8B/81862404 404 (Not Found)
这一段报错信息陷入了深思
404 申请必定是接口地址不正确的问题,然而这里的门路看着没问题(但也只是看着)
这里发现最初申请的门路退出了一些编码,也就是 %E2%80%8B
这个,而后在控制台调用 decodeURI('%E2%80%8B')
,返回 ''
空字符串,看到这里应该明确了,嗯,倒吸一口凉气 …
起因
如果将光标挪动到 下面 url
门路上,会发现每个 /
后面须要挪动两次能力跳过,其实那儿的确有一个非凡的字符,只是它没有宽度,让人误以为是什么也没有,然而如果 encodeURI
编码一下会发现的确是有货色的,也就是 %E2%80%8B
最初发现,还是因为偷懒图不便,接口地址间接从 swagger
文档那边复制过去的,而复制源外面的字符存在空白编码%E2%80%8B
,空白编码没有宽度,尽管看不到然而会导致无奈准确匹配呈现问题,浏览器对申请门路会自动编码,这样门路齐全就不一样了,这个后端路由无奈辨认,当然就 404 了
网上查了下,%E2%80%8E
的学名叫 Zero-width-space(零宽空格)
,顾名思义,它是一个 Unicode
字符,肉眼不可见,却是的确存在的一个字符
解决
- 一时复制一时爽,始终复制一爽快,你无奈确认你复制的字符是否存在空白编码,所以少点复制,还是老老实实手敲一遍吧,尤其是字符串的局部
- 从开发者的角度来看,能通过代码解决的必定更好,其实能够在发送申请之前对
url
做个正则匹配,将%E2%80%8B
替换掉
伪代码:
// 在申请发送前
url = decodeURI(encodeURI(url).replace(/%E2%80%8B/g, ''))
遇到这个问题其实挺无奈的,一个并不起眼的中央,如果你不留神,会导致你做很多无用功