AngularJS的POST请求未发送JSON数据。

Question

我正在尝试将一个对象以JSON格式发送到我的Flask webservice上，该webservice预期在请求数据中收到JSON。

我已经通过发送JSON数据手动测试了该服务，并且它可以正常运行。然而，当我尝试通过angular控制器发起http POST请求时，web服务器会发送一条消息，称其未收到JSON。

当我在Chrome中检查请求头时，似乎数据并没有以JSON格式发送，而是以常规的键/值对形式发送，即使内容类型设置为application/json。

Request Method:POST
Status Code:200 OK
Request Headersview source
Accept:application/json, text/plain, */*
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Connection:keep-alive
Content-Length:49
Content-Type:application/json;charset=UTF-8
DNT:1
Host:localhost:5000
Origin:http://localhost:5000
Referer:http://localhost:5000/
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/27.0.1453.116 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
application=AirFare&d1=10-APR-2013&d2=14-APR-2013

如果您看到下方的“请求有效载荷”的最后一行，您会发现数据不是以JSON格式呈现。

这是我Angular控制器中的HTTP POST调用：

$http({
            url: '/user_to_itsr',
            method: "POST",
            data: {application:app, from:d1, to:d2},
            headers: {'Content-Type': 'application/json'}
        }).success(function (data, status, headers, config) {
                $scope.users = data.users; // assign  $scope.persons here as promise is resolved here 
            }).error(function (data, status, headers, config) {
                $scope.status = status + ' ' + headers;
            });
};  

我将数据发送为一个对象 {}，但我尝试通过 JSON.stringify 进行序列化后发送，无论我做了什么都似乎无法将 JSON 发送到服务器。非常感谢有人能帮忙。

- smartexpert

---

$http POST默认以JSON编码方式发送数据。尝试从$http调用中删除“headers”。这可能会覆盖默认标头，并导致服务器上出现意外结果。您还可以发布请求标头以进行双重检查。 - Narretz

@smartexpert，你找到解决方案了吗？我也遇到了同样的问题，我尝试了很多方法来解决它，但是都没有成功。如果你找到了解决方案，请帮帮我。非常感谢！ - pejman

Answer 1

如果您正在序列化您的数据对象，它将不是一个合适的JSON对象。取出您所拥有的内容，只需使用JSON.stringify()将数据对象包装起来即可。

如果您正在序列化您的数据对象，它将不是一个合适的JSON对象。取出您所拥有的内容，只需使用JSON.stringify()将数据对象包装起来即可。

$http({
    url: '/user_to_itsr',
    method: "POST",
    data: JSON.stringify({application:app, from:d1, to:d2}),
    headers: {'Content-Type': 'application/json'}
}).success(function (data, status, headers, config) {
    $scope.users = data.users; // assign  $scope.persons here as promise is resolved here 
}).error(function (data, status, headers, config) {
    $scope.status = status + ' ' + headers;
});

- rGil

---

我的问题是我有 data: {someVar: JSON.stringify(myVar)}，而不是这个答案中的内容。 - JohnAllen

Answer 2

我尝试了你的示例，它完全正常运行：

var app = 'AirFare';
var d1 = new Date();
var d2 = new Date();

$http({
    url: '/api/test',
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    data: {application: app, from: d1, to: d2}
});

输出：

Content-Length:91
Content-Type:application/json
Host:localhost:1234
Origin:http://localhost:1234
Referer:http://localhost:1234/index.html
User-Agent:Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/29.0.1547.66 Safari/537.36
X-Requested-With:XMLHttpRequest
Request Payload
{"application":"AirFare","from":"2013-10-10T11:47:50.681Z","to":"2013-10-10T11:47:50.681Z"}

您是否正在使用最新版本的AngularJS？

- Herman Kan

Answer 3

您可以通过以下方式使用您的方法

var app = 'AirFare';
var d1 = new Date();
var d2 = new Date();

$http({
    url: '/api/apiControllerName/methodName',
    method: 'POST',
    params: {application:app, from:d1, to:d2},
    headers: { 'Content-Type': 'application/json;charset=utf-8' },
    //timeout: 1,
    //cache: false,
    //transformRequest: false,
    //transformResponse: false
}).then(function (results) {
    return results;
}).catch(function (e) {

});

- Shohel

---

应该使用 data: 而不是 params:。 - theRemix

我认为这是正确的答案。如果您需要有多个@RequestParams，则其他所有方法都无法正常工作。 - Andrew Gans

Answer 4

您可以使用FormData API https://developer.mozilla.org/zh-CN/docs/Web/API/FormData。

var data = new FormData;
data.append('from', from);
data.append('to', to);

$http({
    url: '/path',
    method: 'POST',
    data: data,
    transformRequest: false,
    headers: { 'Content-Type': undefined }
})

这个解决方案来自于http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs，它可以帮助您使用AngularJS实现文件上传。

- monkey

Answer 5

尝试使用绝对URL。如果不起作用，请检查服务的响应是否具有以下标头：

Access-Control-Allow-Origin和Access-Control-Allow-Headers

例如：

"Access-Control-Allow-Origin": "*"
"Access-Control-Allow-Headers": "Origin, X-Requested-With, Content-Type, Accept"

- irakli2692

Answer 6

$http({
    url: '/api/user',
    method: "POST",
    data: angular.toJson(yourData)
}).success(function (data, status, headers, config) {
    $scope.users = data.users;
}).error(function (data, status, headers, config) {
    $scope.status = status + ' ' + headers;
});

- destino

Answer 7

您可以使用以下内容查找已发布的数据：

data = json.loads(request.raw_post_data)

- Brian