AngularJS$http POST请求，带有JSON参数AND查询字符串

AngularJS $http POST request with JSON parameter AND query string

本文关键字：参数 JSON AND 查询 字符串 带有 http POST 请求 AngularJS      更新时间：2023-09-26

正如标题所示，我正试图使用Angular的$http对象编写一个AJAX调用。我想发送一个post请求，该请求在请求的正文中提交JSON，但在URL后面还附加了一个查询字符串。在阅读了$http的文档，在SO上搜索答案，并尝试了几种不同的配置后，我仍然不清楚如何正确传递参数当前，我的API以空JSON或错误请求（400）进行响应。

代码

function inviteStaff (json) {
    authToken = service.getAuthToken();
    return $http({
        method: 'POST',
        url: baseUrl + '/invitations' + '?authToken=' + authToken,
        data: JSON.stringify(json),
        headers: {
            'Content-type': 'application/json'
        }
    });
}

消耗功能

self.invite = function ($form) {
    self.showLoader = true;
    InvitesService.inviteStaff($scope.inviteModel).then(function () {
        $form.$setPristine();
        $scope.inviteModel.timestamp = new Date();
        $scope.invites.unshift($scope.inviteModel);
        $scope.inviteModel = self.createNewInvite();
        self.showLoader = false;
    }, 
    function () {
       self.showLoader = false;
    });
};

请求日志

data: "authToken=********&t=*****" // this is weird because it adds another "t" parameter to this query string here 
headers: Object
    Accept: "application/json"
    Accept-Language: "en"
    Content-type: "application/json"
    authToken: "*********" // just the token here
    __proto__: Object
method: "POST"
params: Object
timeout: Object
transformRequest: Array[1]
transformResponse: Array[1]
url: "http://****.****.com:****/doctors/invitations?authToken=*****"
__proto__: Object

参数JSON对象

{
    accountType: "LEAD_DOCTOR", 
    firstName: "kraken", 
    lastName: "lastName", 
    email: "kraken@mail.com"
}

有人能告诉我们这应该如何运作吗？我将json对象传递给数据还是参数？我需要在数据字段上使用JSON.stringify吗？在某些情况下，我还看到有人向数据传递一个空字符串。

我也一直在通过Charles Proxy运行它。我可以非常接近我想要的内容，但由于某种原因，JSON在JSON文本过滤器下显示为查询字符串，而不是JSON过滤器。

任何想法都会有所帮助。我将对其进行重构和升级，以使用$resource工具，但我们的最后期限很紧，我现在只想让它发挥作用。如果你需要更多信息，请告诉我。

更新我们正在使用swagger来记录我们的API，您实际上可以在他们的UI中达到端点。它生成以下CURL命令。我认为这可能有助于发现问题。

curl -X POST --header "Content-Type: application/json" --header "Accept: application/json" -d "{
    '"firstName'": '"string'",
    '"lastName'": '"string'",
    '"email'": '"blah@mail.com'",
    '"accountType'": '"CLIENT'"
}" "http://*****.****.com:****/doctors/invitations?authToken=***obfuscatedAuthToken***"

我建议您利用标题字段：

function inviteStaff (json) {
authToken = service.getAuthToken();
return $http({
    method: 'POST',
    url: baseUrl + '/invitations',
    data: JSON.stringify(json),
    headers: {
        'Content-type': 'application/json',
        'authToken': authToken
    }
   });
 }

然后在服务器端，向当前请求询问authToken的头值。

在URL中传递令牌有一些安全问题，请阅读：带令牌参数的https URL：它的安全性如何？

原来我们在代码库的其他地方有一个HTTP Interceptor函数，它正在更改内容类型！把它包装在一个条件中，现在就可以走了。感谢所有帮助我确保代码编写正确的人！

相关文章：