web-dev-qa-db-ja.com

Angular JS POST要求はJSONデータを送信しません

リクエストデータにJSONが必要なFlaskのWebサービスにJSONとしてオブジェクトを送信しようとしています。

JSONデータを送信してサービスを手動でテストしましたが、正常に機能します。ただし、POSTコントローラーを介してhttp angular要求を作成しようとすると、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

Request Payloadの下の最後の行を見ると、データがJSON形式ではないことがわかります。

これは、私のPOSTコントローラーのHTTP angular呼び出しです。

$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をサーバーに送信することはありません。

誰かが助けてくれれば本当に感謝します。

web-serviceshttpangularjsflask
41
smartexpert

データオブジェクトをシリアル化する場合、適切な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;
});
49
rGil

私はあなたの例を試しましたが、うまく動作します：

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を使用していますか？

10
Herman Kan

この方法でメソッドを使用できます

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) {

});
2
Shohel

FormData APIを使用できます https://developer.mozilla.org/en-US/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 からのこのソリューション

2
monkey

絶対URLを使用してみてください。動作しない場合は、サービスの応答にヘッダーがあるかどうかを確認します。

Access-Control-Allow-OriginおよびAccess-Control-Allow-Headers

例えば：

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