Angular: $http requests gives -1 status

Question

A node.js server gives "This is a string". (writeHeader, write( string), end).

When performing a $http request, I see that the node.js server is responding and sending the information back.

In Angular I perform the following request:

angular.module('phoneList').
  component('phoneList', {
  templateUrl: 'phone-list/phone-list.template.html',
  controller: function PhoneListController($http) {
    var self = this;
    $http.get('http://127.0.0.1:8081/echo').then(function(response) {
      self.data = response.data;
    }, function(err) {
      self.error = err;
      self.status = response.status;
      self.statusText = response.statusText;
  }); 
 }
});

Response

{"data":null,"status":-1,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://127.0.0.1:8081/echo","headers":{"Accept":"application/json, text/plain, /"}},"statusText":""}

I tried both just sending JSON from node.js or HTML-text. No difference.

Unblushing

"status": -1 normally means that your backend is not available. Could be an CORS allow-origin problem. Any errors in the console? – Haith

Answer 1

Thanks a lot, @Sebastian Sebald and @Dex for guiding me to the solution. I just wanted to run a simple Node.js server on my computer serving messages to my (simple) Angular script.

Yes, it was a cross-domain issue. @TonyTakeshi gave a good solution to this issue. You can solve it in the node.js server file via:

app.all('*', function(req, res, next) {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Methods', 'PUT, GET, POST, DELETE, OPTIONS');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
});

Heavy stuff for a simple test configuration ;-)

Unblushing

Answer 2

Please consult the official Angular docs for $http. It states the following:

Also, status codes less than -1 are normalized to zero. -1 usually means the request was aborted, e.g. using a config.timeout.

So I guess it is a problem with your backend. Maybe take a look in the developer console to check if the request reaches your server.

Cardiganshire

Can you provide a plunkr/jsbin or something? Does your sie (nu.nl) accepts "application/json"? If not, $http cant get you anything. – Cardiganshire

I tried: $http.get('validate.jsontest.com/?json={"key":"value"}', {timeout: 10000}).then(function(response) { – Unblushing

Works for me: jsbin.com/zaqaveh/edit?js,console Maybe the error you're getting is somewhere else in your code? – Cardiganshire

Your code works. Thanks for sharing. Woops, can this be the reason? Translated into english: Cross-Origin-request blocked: the Same Origin Policy prohibits the external source at 127.0.0.1:8081/echo. (Reason: CORS-header ‘Access-Control-Allow-Origin’ is omitted / not specified). How to solve? – Unblushing

Answer 3

Another suggestion as I recently encountered this issue:

It was intermittent, not reproducible and would occur in shifting time intervals, sometimes after ~20 seconds, sometimes in >5ms (not enough time for a full round trip)

Things I isolated while testing: Server, load balancer, firewall, angularjs application itself, browser.

Extensive testing exonerated all culprits and it was not a CORS issue. The problem was the end users' feeble, intermittent internet connection. Implementing an HTTP interceptor retry function if the status came back -1 and a max retry count effectively handled the issue.

Tragacanth

Answer 4

If you're talking to Tomcat and using a Filter which sets e.g. a 401 for restricted access, this filter may prevent your Access-Control headers from being sent along with the request, and your 401 will show up in Angular as a -1, even though it's clearly a 401 in the in-browser network requests log .

Just posting this here for when I forget and re-do the same dumb thing in a year.

Mesoblast