【HTTP】http请求url参数包含+号，被解析为空格
项目技术：Angular 6
问题现象：接口传参的时候，使用 httpClient.post 方法提交数据，字段中包含+号被解析成空格，提交数据错误
解决过程：
1、http请求中包含+号，会被自动解析成空格，必须将加号替换成 '%2B'，则数据提交正常，如下测试代码
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<input type="text" id="createResult" />
<input type="text" id="staffName" />
<input type="text" id="staffNumber" />
<input type="text" id="staffSex" />
<input type="text" id="staffJob" />
<input type="button" id="btnSave" onclick="btn()" value="发送请求"/>
<script>
function createXHR() {
if (typeof XMLHttpRequest != "undefined") { return new XMLHttpRequest();
} else if (typeof ActiveXObject != "undefined") { if (typeof arguments.callee.activeString != "string") {
var versions = ["MSXML2.XMLHTTP6.0", "MSXML2.XMLHTTP3.0", "MSXML2.XMLHTTP"], i, len;
for (i = 0; len = versions.lengthli < len; i++) {
try {
new ActiveXObject(versions[i]);
arguments.callee.activeString = versions[i];
break;
} catch (ex) {
//跳过
}
}
}
return new ActiveXObject(arguments.callee.activeString);
} else {
throw new Error("无可用XHR");
}
} function btn() {
var createResult = document.getElementById("createResult");
var data = "name=" + document.getElementById("staffName").value.replace(/\+/g, "%2B")
+ "&number=" + document.getElementById("staffNumber").value.replace(/\+/g, "%2B")
+ "&sex=" + document.getElementById("staffSex").value.replace(/\+/g, "%2B")
+ "&job=" + document.getElementById("staffJob").value.replace(/\+/g, "%2B");
var request = createXHR();
request.onreadystatechange = function () {
if (request.readyState === 4) {
if (request.status === 200) {
createResult.innerHTML = request.responseText;
} else {
alert("发生错误" + request.status);
}
}
};
request.open("POST", "http://kjss.kuaijisishu.cn/expense.html?list&isArrearage1=&handleUserId=&field=id,stuNo,stuName,telphone,planclassesName,shouldPayFee,havePayFee,discountFee,returnFee,remainPayFee,lastPayDate,buildDate,returnState,handleUserName,licenseCode,domain,orgName,", false);
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
request.send(data);
}
</script>
</body> </html>
2、在angularjs提交时，将+号replace成%2b，但提交的数据仍然是空格
所以，调试angular源码，发现,HttpUrlEncodingCodec 中包含这么段代码，将数据又解析回去：
encodeKey(k: string): string {
return this.encode(k);
}
encodeValue(v: string): string {
return this.encode(v);
}
private encode(v: string): string {
return encodeURIComponent(v)
.replace(/%40/gi, '@')
.replace(/%3A/gi, ':')
.replace(/%24/gi, '$')
.replace(/%2C/gi, ',')
.replace(/%3B/gi, ';')
.replace(/%2B/gi, '+')
.replace(/%3D/gi, ';')
.replace(/%3F/gi, '?')
.replace(/%2F/gi, '/');
}
3、到angular的github的 issue中找，果然发现有很多人有同样的问题，其中有包含解决方案。
参考资料：https://github.com/angular/angular/issues/11058
解决方案：重写Angular的参数编码方式（HttpUrlEncodingCodec ）
//解决http请求+号显示空格问题
class GhQueryEncoder extends HttpUrlEncodingCodec {
encodeKey(k: string): string {
k = super.encodeKey(k);
return this.replaceCharacter(k);
}
encodeValue(v: string): string {
v = super.encodeKey(v);
return this.replaceCharacter(v);
}
replaceCharacter(v) {
return v.replace(/\+/gi, '%2B');
}
}
【HTTP】http请求url参数包含+号，被解析为空格的更多相关文章
- 使用Typescript重构axios(三)——实现基础功能：处理get请求url参数
0. 系列文章 1.使用Typescript重构axios(一)--写在最前面 2.使用Typescript重构axios(二)--项目起手,跑通流程 3.使用Typescript重构axios(三) ...
- 【2019】问题记录一：后端获取URL参数的值内加号“+”变成空格“ ”
问题:URL参数中加号“+”变成空格“ ” 一.现象 URL如:http://example.****.com/controller/action?param=rice+cook+panda ...
- get请求url参数中有+、空格、=、%、&、#等特殊符号的问题解决
url出现了有+,空格,/,?,%,#,&,=等特殊符号的时候,可能在服务器端无法获得正确的参数值,如何是好?解决办法将这些字符转化成服务器可以识别的字符,对应关系如下:URL字符转义 用其它 ...
- Loadrunner加密算法脚本与token作为get请求url上的参数处理
1.当字符串被封装好加密时(下例将算法封装在md5中),使用Loadrunner编写脚本,需要进行如下操作: 1)将md5.h文件添加到Extra Files 下,如图(Loadrunne ...
- 为什么返回的数据前面有callback？ ashx/json.ashx?的后面加 callback=? 起什么作用 js url?callback=xxx xxx的介绍 ajax 跨域请求时url参数添加callback=?会实现跨域问题
为什么返回的数据前面有callback? 这是一个同学出现的问题,问到了我. 应该是这样的: 但问题是这样的: 我看了所请求的格式和后台要求的也是相同的.而且我也是这种做法,为什么他的就不行呢? ...
- Objective-C中把URL请求的参数转换为字典
上一篇博客中是把URL转换为字典,那么我们如何把URL请求中的参数封装成字典,然后再封装成数组呢?对OC中字符串操作熟练的小伙伴们应该觉得这是一个a+b的问题,没错把URL中的参数转换为字典主要是对字 ...
- 程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用
结合微信登录以及微信支付的案例:= =||| (案例比较奇葩复杂) 简述项目流程: 1.获取用于公众号支付的openid(公众平台):在微信内置浏览器中打开网页链接,刚进入页面就通过微信公众平台获取该 ...
- 加号变空格问题 url参数 post get 请求发送
问题:加号后台接收变空格问题 结论: 1.任何get拼接的请求 参数key value 需要编码后在拼接 2.get请求避免做数据提交,用post提交.jq,axios的post提交默认编码了不会有问 ...
- Java_得到GET和POST请求URL和参数列表
一. 获取URL: getRequestURL()(还有个getRequestURI(),只取后面部分) 二. 获取参数列表: 1.getQueryString() 只适用于GET,比如客户端发送ht ...
随机推荐
- C++学习笔记（二）--基础
1.浮点型数值不管写成什么样 都是以指数形式保存在内存中 数符|数字部分|指数部分 例:+0.33E10 数字部分的整数部分不能大于1,小数点后面不能是0. 2.字符数据是以整数形式保存在内存中的(A ...
- 二维码生成器，基于python,segno库
import segno temp = input("Please enter value:") qr = segno.make(temp) qr.save("qrcod ...
- [暑假集训Day3T1]小木棍
经典搜索题. 考虑以下9种优化 1)按木棍长度排序,使得较大长度的木棍被较早的选出. 2)只找能够整除的木棍长度,因为不能被sum整除一定不会出整数根,自然也就不是最优解. 3)枚举木棍长度时只需从最 ...
- Python入门之基础day1
一.引子 1. 什么是编程语言? 编程语言就是人与计算机沟通的介质 2.什么是编程? 编程就是人把自己想命令计算机干的事情通过编程语言翻译出来并写到文件里去 为什么要编程? 编程的目的就是为了让计算机 ...
- beeline链接hive报错
看问题:beeline连接hiveserver2报错.连接串:hive --service beeline -u jdbc:hive2://localhost:10000/hive 错误:Error ...
- go web编程——实现一个简单分页器
在go web编程中,当需要展示的列表数据太多时,不可避免需要分页展示,可以使用Go实现一个简单分页器,提供各个数据列表展示使用.具体需求:1. 可展示“首页”和“尾页”.2. 可展示“上一页”和“下 ...
- spring(四)：spring中给bean的属性赋值
spring中给bean的属性赋值 xml文件properties标签设置 <bean id="student" class="com.enjoy.study.ca ...
- 如何查找django安装路径
需要找到django的安装路径,官方说的那个方法不好用,国内搜索都是都不到的,后来谷歌搜到了很简单 import django django 这样就可以找django的安装路径了,真心不懂为什么国内都 ...
- ROT13加密和解密
问题 ROT13(回转13位)是一种简易的替换式密码算法.它是一种在英文网络论坛用作隐藏八卦.妙句.谜题解答以及某些脏话的工具,目的是逃过版主或管理员的匆匆一瞥.ROT13 也是过去在古罗马开发的凯撒 ...
- 快速的统计千万级别uv
菜菜,咱们网站现在有多少PV和UV了? Y总,咱们没有统计pv和uv的系统,预估大约有一千万uv吧 写一个统计uv和pv的系统吧 网上有现成的,直接接入一个不行吗? 别人的不太放心,毕竟自己写的,自己 ...