My angular promise unexpectedly goes to error callback, why?

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'.

Are you sure you're getting a 200? According to the [docs](https://docs.angularjs.org/api/ng/service/$http) the success callback should be called for any status code between 200-299 — Robin-Hoodie, Nov 30 '16 at 12:56

Antonio · Answer 1 · 2016-11-30T13:19:11.347

0

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

edited Nov 30 '16 at 13:19

answered Nov 30 '16 at 13:05

Antonio

901
5
12

score 0 · Answer 2 · answered Nov 30 '16 at 18:31

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

score 0 · Answer 3 · answered Dec 01 '16 at 08:25

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.

My angular promise unexpectedly goes to error callback, why?

3 Answers3