URL中加号(+)转义问题

前端通过URL传入一个参数,在后台日志中发现参数中的加号变成了空格。
前端传入"a+b"
后台日志"a b"

先说结论

HTTP为了避免歧义,一些字符传入后台需要做转义,例如:
" - %22

- %23

% - %25
& - %26

  •       -    %2B
    加号在传入后台的时候,应该转换为 %2B,但是当加号在 URL 中时,特殊的,它会变成空格(Chrome浏览器自动转换)。
    为什么会出现这个问题,不清楚。但是如果需要传入 +,在拼接 URL 之前把 + 转换为 %2B 即可。这是最合理的解决方法。

GET POST 表单提交的转义

另外,在提交表单时,参数会自动完成转义,并且这个转义是符合预期的。

GET提交的转义:
1+1 转换为 1%2B1

POST提交的转义:
1+1 转换为 1%2B1

如何手动转换

在前端拼接 URL,如果需要转换 +,可以用 encodeURIComponent 函数进行转义。
需要注意,encodeURI 和 URL 的转义类似,不能正确处理 +。
encodeURIComponent 可以正确转换 +。
代码:

  let s = '1+1'
  let var_encode_s1 = encodeURI(s)
  let var_encode_s2 = encodeURIComponent(s)
  console.log(var_encode_s1)
  console.log(var_encode_s2)

输出:

1+1
1%2B1
02-12 07:51