乐趣区

关于http:不要再复制了url-空白编码引发的事故

jiezi

最近在联调接口时发现了一个要命的问题，就是接口 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, ''))

遇到这个问题其实挺无奈的，一个并不起眼的中央，如果你不留神，会导致你做很多无用功

退出移动版