0

I have a REST service. Which is having JWT authorization. To get the token, you need to send POST request to '/login' endpoint with JSON:

{
  'username':'username',
  'password':'password'
}

After that you receive JSON, for example:

{
  'token': "a1a1.b2b2.c3c3"
} 

I'm new to AngularJS and JavaScript itself, so I'm playing with basics for now. Just trying to get a token from login service.

index.html

<!DOCTYPE html>
<html ng-app="app">

<head>
   <meta charset="UTF-8">
   <title>app</title>
   <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
   <script src="app.js"></script>
   <script src="service.js"></script>
</head>

<body class="container" ng-controller="AppController as app">
 <div ng-controller="ServiceController as service">
   <p>{{service.login()}}</p>
 </div>
</body>

</html>

app.js

(function () {
  var app = angular.module('app',['service']);

  app.controller('AppController', function () {
  });
})();

service.js

angular.module('service', [])
.controller('ServiceController', ['$http', function ($http){
   var url = 'http://localhost:8080/login';
   var resp = 'lol';
  var credentials = { 'username' : "username", 'password' : "password" };

  this.getToken = function () {
    return $http.post(url, credentials).success(function(response) {
        angular.forEach(response.data.token, function(token) {
            resp = token;
        });
    });
    };

 this.getToken();

 this.login = function () {
     return resp;
 };

}]);

So when I open index.html it's getting me lol instead of JSON response that I'm expecting. Whats wrong with that?

EDIT2:

service.js

angular.module('service', [])
.controller('ServiceController', ['$http', function ($http){
   var url = 'http://localhost:8080/login';
   var resp = 'lol';
  var credentials = { 'username' : "username", 'password' : "password" };
 $http.defaults.headers.common['Content-Type']= 'application/json';
 $http.defaults.headers.common['Access-Control-Allow-Origin'] = '*';

 *this.getToken = function () {
    return $http.post(url, credentials).success(function(response) {
            resp = response.data.token;
    });
    };*

 this.getToken();

 this.login = function () {
     return resp;
 };

}]);
ottercoder
  • 852
  • 1
  • 12
  • 31
  • 1
    why are you using forEach for `response.data.token`? – aseferov May 24 '16 at 10:31
  • @aseferov fair point – ottercoder May 24 '16 at 10:36
  • and now it's giving me XMLHttpRequest cannot load http://localhost:8080/login. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63343' is therefore not allowed access. The response had HTTP status code 401. – ottercoder May 24 '16 at 10:38
  • 1
    @ottercoder CORS issue. Research how to resolve cross origin policy. – T J May 24 '16 at 10:41
  • Since you are requesting the same server, you have a Cross origin problem, check http://stackoverflow.com/questions/10636611/how-does-access-control-allow-origin-header-work for more info, it should be enough to add some request headers ... – JoSeTe4ever May 24 '16 at 10:41
  • @JoSeTe4ever @T J does this looks good? But still not working – ottercoder May 24 '16 at 11:00
  • So in the end. I disabled CORS in Chrome Browser, but somehow it didn't helped. So I moved my static files to API project. Now there's no CORS problem and everything is fine. Thanks everyone. Would like to now solution though. – ottercoder May 25 '16 at 08:58

0 Answers0