angular中关于HttpClient对参数进行自动编码问题

1.angular的HttpClient中对特殊字符会进行转码

标题即结论，在angular的HttpClient中，会对特殊字符进行转码。

在具体业务中，服务端需要接收值为'+' 的参数，但是debug发现参数传到服务端的途中变成了空格,但是期望为'+'，本以为是浏览器行为，但通过查阅资料，询问ai得知HttpClient会自动编译url中的非法参数。

但是我所期望的转译结果是+（%2B），这与自动转译的结果是有偏差的，所以在拦截器中我们手动用encodeURIComponent进行编码，这次的结果+是被转码了，但是变成了%252B，是被转码两次的结果。 很显然被编码了两次，为什么一开始 + “不会被编码” 而现在又被重复编码呢？

其实最开始的+也是被自动编码了，但是又被自动转译回来成了'+'，为什么会这样呢，在后续的文章我会补充。  而后面的做法为什么会变成%252B呢？我们把它反过来decode一下可以发现，其实%252B在解码后变成了%2B，由此可知，其实重复编码的结果是把第一次编码后的%重新编码成了%25。  所以会产生一种错觉“为什么要不就不编码，一编码就编两次”。

2.怎么处理得到我们期望的正确编码

那我们要从根源开始找问题

我们借助断点和控制台可以看到请求中的参数中有个encoder

 看的出来这就是自动编码相关的属性了，那我们继续往下找

 

 

 我们可以看到，最终影响编码的就是HttpParameterCodec了

那我们可以这样处理

 然后在拦截器中

 在上述代码中，我们创建了一个名为 CustomHttpUrlEncodingCodec 的自定义编码器，实现了 HttpUrlEncodingCodec 接口，并重写了 encodeValue 方法，将 + 编码为 %2B。然后，我们在创建 HttpParams 对象时，将自定义编码器传递给 encoder 参数，这样 HttpClient 将 + 自动编码为 %2B。

该做法能满足需求，具体原理以及方法优化请至下文：

关于angular HttpClient转码问题补充_MockingBHM的博客-CSDN博客