angular2及以上的默认http前端请求,加号变空格的处理

注意:本文章讨论范围是默认请求的方式或者form表单形式的请求。

问题:

1、当我们用angular2(angular4,angular5,angular6,angular7,angular8,angular9)原始的http请求请求后端的时候,如果请求参数中有"+","@",":","$",",","=","?","/"等特殊符号,比如我们填写的是"test+test",用get请求:

那么传过去的最终的url为:

2、那么这会导致什么问题呢?

因为我们这里传输的是"赤裸裸"的加号"+",那么后端在解析这种字符的时候,会将其替换为空格,所以,我们用chrome的DevTools的Network面板查看的转化参数为:

发现是"test test",中间的"+"变成了空格,这就导致如果后端的数据包含了加号"+",但是我们会查不出来;

根源:

1、我们跟踪基础的请求服务:

通常的结构都是这样,构建一个默认的HttpParams的参数,然后用http服务去请求后端,然后我们跟踪这个HttpParams:

这是声明类,注意到上面有对应的实现类:

我们看下fesm2015下的http.js,发现实现类:

如果默认的options中什么都不传,那么使用HttpUrlEncodingCodec类,继续跟踪这个类:

发现调用了这个standardEncoding,跟踪这个方法:

发现这个方法把我们转码的字符串又给replace掉了,罪魁祸首找到了。

解决:

1、问题找到了,就很好解决了。

前面我们发现,HttpParams的构造函数可以接口options参数,所以我们改写这个类,然后传入改写后类的实例就行了。

我们只保留standardEncoding(v)方法的encodeURIComponent部分,后面的replace不要了;

然后传入:

_this.params = new HttpParams({
    encoder: _this.commonHttpCodec
});

然后我们查看效果:

用chrome的DevTools的Network面板查看的转化参数为:

也是好的,后台可以返回包含加号"+"的结果。

 

后记:

第一次碰到遇到这个问题,刚开始也是不知道什么原因,一下是追溯过程:

先用Chrome的DevTools的Sources面板,查看我传的值有没有问题:

发现传的的确是:test+test,所以这里没问题;

然后跟踪我们封装的http那一层方法:

通过这里,我们可以直接看到:

是这个文件,然后在这个文件上,点击鼠标右键,在弹出的菜单中选择: Reveal in sidebar

就找到了Babel编译过的文件。

利用Chrome的DevTools帮我们一步一步找到源头。

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值