My angular promise unexpectedly goes to error callback, why? - angularjs

Question

I have a client running on Angular + typescript.
I need to send a post request to a php API (which I developed). The request arrives correctly to the server and the server fills the response body with the correct data (I have checked it myself debugging the server).
The issue is that, when the server responds, the angular promise executes the error callback and the response data is empty. When I check the sent request in the browser it says it was answered with a 200 OK status but it has an empty body.
I have tried calling the same API endpoint with the same paramentres through Firefox Api-requester addon and i recieve the response with the correct body... why is my Angular client not succeeding then?
The following code fragment corresponds to my controller:
vm.query = {
'tx_filtre':'', 'idioma_filtre':'', 'tipus':'', 'id_dimfisica':'', 'tamPag':15, 'numPag':0
};
this.PropietatsService.getPropietats(vm.query)
.then((response: ng.IHttpPromiseCallbackArg<string>) => {
vm.objResult = JSON.parse(response.data);
vm.propietats = vm.objResult.info;
console.log('rebut', this.propietats);
}, (response: ng.IHttpPromiseCallbackArg<string>) => {
//always executes this error function, why????
vm.objResult = JSON.parse(response.data);
});
And this is the relevant code for the service:
getPropietats(query: any): ng.IPromise<ng.IHttpPromiseCallbackArg<string>> {
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
}
};
return this.$http.post("http://localhost:8080/diccionaris/propietat/get",JSON.stringify(query),config);
}
On a side note, for some reason my server can't process the request if I set the request 'Content-Type' to 'application/json' in my client. That is the reason why I have set it to 'application/x-www-form-urlencoded'.

Answer 1

You set 'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;', but you encode query params to JSON and then you try to decode a response like JSON. Try set application/json or try to remove JSON.encode request params and send to post method query.
If it doesn't help log error (in response) in error callback and look at it

Answer 2

If the server is not capable of accepting application/json, then the POST data needs to be encoded for application/x-www-form-urlencoded. To do this use the $httpParamSerializer Service:
getPropietats(query: any): ng.IPromise<ng.IHttpPromiseCallbackArg<string>> {
var config = {
headers : {
'Content-Type': 'application/x-www-form-urlencoded;charset=utf-8;'
},
transformRequest: $httpParamSerializer
};
return this.$http.post(url,query,config);
}

Answer 3

I finally found the solution: it was a CORS problem.
I was running my server and my client in two different localhost ports so, although the server processed the request (which doesn't make much sense to me), it wasn't returning the response because the client was not allowed to access the server. To deal with it for now I've added the following line to my server index.php:
header('Access-Control-Allow-Origin: *');
And now it works just fine.