AngularJS项目前后端对接时遇到的传参问题

断剑重铸之日,骑士归来之时! — 向着自由,向着未来出发Aco (๑╹◡╹)ノ”””


今天在和后端进行对接的时候,遇到了一个很奇怪的 bug : 一个POST请求,参数里必要的字段,格式和请求的地址都是正确的,但是一直报400错误

先说结论: 调了很久最后发现是 Request body里的参数,即使不是必需的,也得带上,否则就会报请求错误 的问题。 具体过程让我们一起来探讨:

错误描述

daprest-api 接口处直接进行数据测试,是可行的,说明后端的逻辑没有问题

【图一】

【图二】

但是本地运行,执行 http 请求的时候

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
// 废除操作
$scope.delete = function() {
console.log("废除时的参数:projectId:" + projectId + ' taskId:' + taskId + ' activityName:' + activityName);
console.log("projectID 类型"+typeof(projectId));
console.log("url: "+projectConstant.project.blankout);
Dhttp.http({
//url: projectConstant.project.blankout+'?projectId='+projectId+'&taskId='+taskId+'&activityName='+activityName,
url: projectConstant.project.blankout,
method: "POST",
params: {
projectId: projectId,
taskId: taskId,
activityName: activityName
}
}).then(function() {
layer.alert('废除成功!', {
skin: 'layui-layer-lan'
,closeBtn: 0
,anim: 4 //动画类型
});
setTimeout(function () {
$rootScope.$broadcast('verifyForm:delele', '');
}, 500);
});
}

结果:

【图三】

通过仔细的对比,我尝试了几种方法:

解决方法

是参数的数据类型问题吗?

如图:
projectId 和 taskId 的数据类型要求为 Integer 而本地

1
console.log("projectID 类型"+typeof(projectId));

结果为 string,于是

1
2
var projectId = parseInt($stateParams.projectId);
var taskId = parseInt($stateParams.taskId);

将其转化成 number,结果: 失败,依旧是 400 错误

是参数的传入顺序问题吗?

对比【图一】和【图三】,在 Request Header里的 第一部分 General里发现,测试中的url 参数顺序是 ?projectId=245&taskId=522&activityName=%E7%99%BB%E8%AE%B0; Request URL: 里的后半部分 ?activityName=%E7%99%BB%E8%AE%B0&projectId=245&taskId=522 参数顺序不一样,于是我强制让参数顺序统一

1
url: projectConstant.project.blankout+'?projectId='+projectId+'&taskId='+taskId+'&activityName='+activityName,

结果: 失败,依旧是 400 错误

是参数的请求方法问题吗?

直觉上应该不是这个问题,但是死马当活马医了,尝试将 method 方法由 POST 改成 GET

1
2
3
4
5
6
7
url: projectConstant.project.blankout,
method: "GET",
params: {
projectId: projectId,
taskId: taskId,
activityName: activityName
}

结果: 失败,依旧是 400 错误。。。喝口水冷静一下,继续想。

是少传了参数的问题吗?

因为在 daprest-api 上进行测试,填了必填项,是可以成功的,其他参数肯定是默认为空的,会不会是本地也需要传呢? 马上进行测试

1
2
3
4
5
6
7
8
9
10
11
url: projectConstant.project.blankout,
method: "POST",
data: {
reason: ''
},
params: {
projectId: projectId,
taskId: taskId,
activityName: activityName,
xmId: ''
}

结果: 成功! 之后再进行了一次测试,发现 xmId: '' 是可以省略的,重要的是处于 body 里的 reason 字段 即使为空,即使不是必填项,也需要带上,才算是一个完整的 POST 请求

后记

这个问题是第一次遇到,很有价值,希望之后遇到同样问题的朋友能发现我这篇文章,解决 bug。 (๑╹◡╹)ノ”””

Aco wechat
欢迎扫描上方微信公众号,订阅博客获得实时动态!
坚持原创技术分享,您的支持将鼓励我创作出更好的作品!
Fork me on GitHub