$http - Headers not returning - AngularJS

Question

I have an Angular Service I'm trying to set up to retrieve data from a node server that serving JSON files to the application. I've checked the node server URL's and they're all outputting JSON like they should be, but Angular appears to be unable to get them due to the HTTP headers. From some googling this looks like a common problem, I'm just not sure how or even if there's a work around?

eventsApp.factory('eventData', function($http, $log) {
    return {
        getEvent: function(successcb) {
            $http({method: 'GET', url: 'http://localhost:8000/data/event/1'}).
                success(function(data, status, headers, config){
                    successcb(data);
                }).
                catch(function(data, status, headers, config){
                    $log.warn(data, status, headers, config);
                })
        }
    }
});

In the console I'm getting the following warning from the catch:

Object { data: null, status: 0, headers: headersGetter/<(), config: Object, statusText: "" } undefined undefined undefined

you should use `.then()` rather than `.success()`, since `.success()` is deprecated. `.then()` has a `response` parameter, which you should be able to access the headers from. — Claies, Jan 02 '17 at 00:15
I'm totally new to Angular (only started studying it this week), so bare with me, but how would that change the code above apart from replacing success with then? — Web Develop Wolf, Jan 02 '17 at 00:19
update your post with **screenshot** of the error in the console which gives more detailed information — Aravind, Jan 02 '17 at 00:36
Don't use callbacks with promise APIs. They breaks the promise chain and hang on error conditions. See [Why are Callbacks from Promise Then Methods an Anti-Pattern?](http://stackoverflow.com/questions/35660881/why-are-callbacks-from-promise-then-methods-an-anti-pattern). — georgeawg, Jan 02 '17 at 00:36

Ruslan Stelmachenko · Accepted Answer · 2017-01-02T00:48:05.240

From the documentation

// Simple GET request example:
$http({
  method: 'GET',
  url: '/someUrl'
}).then(function successCallback(response) {
    // this callback will be called asynchronously
    // when the response is available
  }, function errorCallback(response) {
    // called asynchronously if an error occurs
    // or server returns response with an error status.
  });

The response object has these properties:

data – {string|Object} – The response body transformed with the transform functions.

status – {number} – HTTP status code of the response.

headers – {function([headerName])} – Header getter function.

config – {Object} – The configuration object that was used to generate the request.

statusText – {string} – HTTP status text of the response.

So you should be able to get the interested header using:

response.headers('header-name')

Aslo according to your response's log: the result.data is null. So you should check the Network tab of Chrome Dev Tools and examine the aqtual http response from the server.

The status 0 indicates the possible CORS problem. So if your angular application is hosted on another host or port than server to which you trying to send the http request (localhost:8000 in your case), then you shoud configure the SERVER to allow CORS requests.

Ok so I've changed it to `then(function successCallback(response){ successcb(response.data); })` but that still fails — Web Develop Wolf, Jan 02 '17 at 00:30
So, do what I suggest: inspect the real http response in the Chrome's dev tools. The `data` is null and `status==0` means that your request even not pass to the server. If your angular application is hosted not on the same `host:port` as your server (`localhost:8000`) to which you send the http request, then it is possible the CORS problem. — Ruslan Stelmachenko, Jan 02 '17 at 00:39
Status is 200 plus it loads with no issue when entering the url directly into the browser which surely means it's fine? — Web Develop Wolf, Jan 02 '17 at 00:42
Then I almost sure it is the CORS problem. But you should see this in Chrome Dev Tools `console` tab. — Ruslan Stelmachenko, Jan 02 '17 at 00:43

$http - Headers not returning - AngularJS

1 Answers1