Solicitação POST JS angular não enviando dados JSON

Eu estou tentando enviar um object como JSON para o meu webservice no Flask que está esperando JSON nos dados da solicitação.

Eu testei o serviço manualmente enviando dados JSON e ele funciona bem. No entanto, quando tento fazer uma solicitação http POST por meio do controlador angular, o servidor da web envia uma mensagem dizendo que ele não recebeu o JSON.

Quando eu inspeciono os headers de solicitação no Chrome, parece que os dados não estão sendo enviados em JSON, mas pares de chave / valor regulares, mesmo através do Tipo de Conteúdo, estão definidos como 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 

Se você viu a última linha abaixo de Solicitar Carga, poderá ver que os dados não estão no formato JSON.

Esta é a chamada HTTP POST no meu controlador 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; }); }; 

Estou enviando os dados como um object {}, mas tentei enviá-los após a serialização por JSON.stringify, no entanto, nada que eu fiz parece enviar JSON para o servidor.

Realmente aprecio se alguém puder ajudar.

Se você estiver serializando seu object de dados, ele não será um object json adequado. Pegue o que você tem e apenas envolva o object de dados em um 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; }); 

Eu tentei o seu exemplo e funciona muito bem:

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

Saída:

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

Você está usando a versão mais recente do AngularJS?

Você pode usar a API FormData https://developer.mozilla.org/pt-BR/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 } }) 

Esta solução de http://uncorkedstudios.com/blog/multipartformdata-file-upload-with-angularjs

você pode usar seu método dessa maneira

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

tente usar o URL absoluto. se não funcionar, verifique se a resposta do serviço tem headers:

Access-Control-Allow-Origin e Access-Control-Allow-Headers

por exemplo:

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

você pode usar o seguinte para encontrar os dados lançados.

data = json.loads(request.raw_post_data)

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