web-dev-qa-db-fra.com

Angular JS POST demande de ne pas envoyer de données JSON

J'essaie d'envoyer un objet au format JSON à mon service Web dans Flask qui attend JSON dans les données de la demande.

J'ai testé le service manuellement en envoyant des données JSON et cela fonctionne bien. Cependant, lorsque j'essaie de faire une demande http POST via le contrôleur angular, le serveur Web m'envoie un message indiquant qu'il n'a pas reçu de code JSON.

Lorsque j'inspecte les en-têtes de requête dans Chrome, il apparaît que les données ne sont pas envoyées au format JSON, mais que les paires clé/valeur habituelles sont définies même si le type de contenu est défini sur 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

Si vous avez vu la dernière ligne sous Request Payload, vous pouvez voir que les données ne sont pas au format JSON.

Voici l'appel HTTP POST dans mon contrôleur 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;
            });
};

J'envoie les données sous forme d'objet {}, mais j'ai essayé de les envoyer après la sérialisation par JSON.stringify. Cependant, rien de ce que je fais ne semble envoyer de JSON au serveur.

Vraiment apprécier si quelqu'un peut aider.

web-serviceshttpangularjsflask
41
smartexpert

Si vous sérialisez votre objet de données, ce ne sera pas un objet json approprié. Prenez ce que vous avez et enveloppez simplement l'objet de données dans un 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

J'ai essayé votre exemple et ça marche très bien:

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}
});

Sortie:

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"}

Utilisez-vous la dernière version de AngularJS?

10
Herman Kan

vous pouvez utiliser votre méthode de cette façon

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

Vous pouvez utiliser l'API FormData 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 }
})

Cette solution de http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

2
monkey

essayez d'utiliser l'URL absolue. si cela ne fonctionne pas, vérifiez si la réponse du service a des en-têtes:

En-têtes de contrôle d'accès autorisé et d'origine de contrôle d'accès

par exemple:

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