url 中的特殊字符 % # & = ? / + 无法被后端解析问题分析及解决方法

Posted 2023-03-15

参考技术A

场景：项目中存在一个列表，用户可以根据名字对列表进行筛选，此时，如果用户 输入%，需要通过 query 的方式传给后端，此时就会出现: http:// xxxxx?name=% 这样的请求, 这样后端是无法获取到这个 name 的值 %的

原因：% # & = ? / + 对 url 来说属于特殊字符，在 URL 中有特殊含义，如果 不加处理，后端就无法获取到相应的内容

解决方法：如果要传递这些特殊字符给后端，需要对它们进行转义，转化为：%加字符的ASCII码，转化方法也非常简单只需要采用 浏览器中默认提供的方法 encodeURIConponent() 帮我们转义即可
例如：

知识拓展：encodeUrl 与 encodeUrlComponent的区别

……而对于 URL 参数，我们应该改用 encodeURIComponent：

将其与 encodeURI 进行比较：

我们可以看到，encodeURI 没有对 & 进行编码，因为它对于整个 URL 来说是合法的字符。

但是，我们应该编码在搜索参数中的 & 字符，否则，我们将得到 q=Rock&Roll —— 实际上是 q=Rock 加上某个晦涩的参数 Roll 。不符合预期。

因此，对于每个 搜索参数 ，我们应该 使用 encodeURIComponent，以将其正确地插入到 URL 字符串中 。最安全的方式是对 name 和 value 都进行编码，除非我们能够绝对确保它只包含允许的字符。