Angularjs I can't Get response data from HTTP localhost call

Question

I want to get response data from REST api. My Localhost URL :

http://localhost:3000/welcome

My AngularJs Code :

<!DOCTYPE html>
<html>
 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl"> 
<h1>{{welcome}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $http) {
  $http.get("http://localhost:3000/welcome")
    .then(function(response) {
       $scope.welcome = response.data;
  });
});
</script>

</body>
</html>

The response data not showing in h1 tag. I have tested this APi in postman working fine.

This is my Nodejs Server code :

var express = require('express');
var app = express();

app.get('/welcome', function(req,res) {
    res.send("Welcome to Nodejs");

});

app.use(function (req, res, next) {

     // Website you wish to allow to connect
     res.setHeader('Access-Control-Allow-Origin', '*');

     // Request methods you wish to allow
     res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

     // Request headers you wish to allow
     res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

     // Set to true if you need the website to include cookies in the requests sent
     // to the API (e.g. in case you use sessions)
     res.setHeader('Access-Control-Allow-Credentials', true);

     // Pass to next layer of middleware
     next();
 }); 

app.listen(3000, "localhost");

Please help me.. Thank you..

Try this $scope.welcome = response; instead of $scope.welcome = response.data; while handling the response. — Rahul Sharma
– Rahul Sharma, Commented Jun 22, 2017 at 6:29

Sachila Ranawaka · Accepted Answer · 2017-06-22 06:25:40Z

1

I think this may occur due to the CORS. Otherwise, your code seems to be fine. add the following Access-Control-Allow-Origin headers in your Express server and try it.

app.use(function (req, res, next) {

    // Website you wish to allow to connect
    res.setHeader('Access-Control-Allow-Origin', '*');

    // Request methods you wish to allow
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');

    // Request headers you wish to allow
    res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');

    // Set to true if you need the website to include cookies in the requests sent
    // to the API (e.g. in case you use sessions)
    res.setHeader('Access-Control-Allow-Credentials', true);

    // Pass to next layer of middleware
    next();
});

answered Jun 22, 2017 at 6:25

Sachila Ranawaka

41.6k8 gold badges62 silver badges87 bronze badges

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

4 Comments

Ramachandran A Over a year ago

Those are the errors has showing in console

XMLHttpRequest cannot load http://localhost:3000/welcome. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.

Ramachandran A Over a year ago

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

Sachila Ranawaka Over a year ago

can u update your answer with the latest node js server

Ramachandran A Over a year ago

Thanks bro.. Got it.. After adding CORS Extension in chrome

Collectives™ on Stack Overflow

Angularjs I can't Get response data from HTTP localhost call

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related