Angular app $http request to node app on localhost

Question

I'm running a nodejs app on localhost:3000. I have a front-end tutorial angular page that calls localhost like this...

  $scope.msg = 'requesting';
  $http({
    method: 'GET',
    url: 'http://localhost:3000/'
  }).then(function(response) {
    $scope.msg = response;
  }, function(response) {
    $scope.msg = 'err ' + JSON.stringify(response);
  });

I can see from the console on my node app that it is answering with 200 and a json object {foo:'bar'}. But the $scope.msg variable ends up looking like this...

err {  
   "data":null,
   "status":-1,
   "config":{  
      "method":"GET",
      "transformRequest":[  
         null
      ],
      "transformResponse":[  
         null
      ],
      "url":"http://localhost:3000/",
      "headers":{  
         "Accept":"application/json, text/plain, */*"
      }
   },
   "statusText":""
}

Why would the client think there's a problem when the server produced a good response? Running the request in the browser works fine.

Loading the angular page (http://localhost:9000) the browser dev tools, I see this...

But for some reason, the response tab is empty. When I make the same request (http://localhost:3000/) with the browser and watch, I see the JSON in the response tab.

What do you see in the browser console? Are you fighting the Same-Origin Policy? — SLaks
– SLaks, Commented May 17, 2016 at 21:58
@SLaks... ahh. the console! yes, it does indicate an "Access-Control-Allow-Origin header is present on the requested resource. ... is therefore not allowed. I'm going to google that now to see if I can learn how to fix. Thanks for the helpful tip. — user1272965
– user1272965, Commented May 17, 2016 at 22:13
Basically you need to set Access-Control-Allow-Origin header to localhost:9000 on server side. (Although, if you host it on localhost only, not publicly, you can just set it to *.) — John Smith
– John Smith, Commented May 17, 2016 at 22:16
@JohnSmith - big help, Thanks! Do you want to make that an answer so I can check it off? — user1272965
– user1272965, Commented May 17, 2016 at 22:20

John Smith · Accepted Answer · 2016-05-17 22:23:39Z

2

As SLaks mentioned in the comment, it happens because of the Same-Origin Policy. Your node app is running on localhost:3000, while your client is on localhost:9000.

You'll need to set Access-Control-Allow-Origin header on server side to allow requests coming from localhost:9000.

answered May 17, 2016 at 22:23

John Smith

2,3414 gold badges23 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mathieu Seiler · Accepted Answer · 2016-05-17 21:59:10Z

-1

Make sure your server reply with a correct content type header:

Content-Type:application/json; charset=utf-8

answered May 17, 2016 at 21:59

Mathieu Seiler

7468 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular app $http request to node app on localhost

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related