Angular $http don't receive response headers from Rails JSON API

37 views
Skip to first unread message

Funny Cherry

unread,
Apr 17, 2015, 6:34:24 AM4/17/15
to ang...@googlegroups.com

I do HTTP request using $http from my Angular Yeoman app to JSON API service based on Ruby on Rails and set.

I have a controller

angular.module('myApp')
  .controller('ApiwrapperCtrl', [ '$scope', '$http', '$log', '$rootScope', 'PubNub', '$cookies','$cookieStore', '$window', function($scope, $http, $log, $rootScope, PubNub, $cookies, $cookieStore, $window) {
....
And method sending request to API:
    $scope.useHttp = function() {
      var requestURL = "http://localhost:3000/api/v1/auth/sign_in?email=gla...@ha.mil&password=123123123"; 
      var requestType = "POST"
      var requestHeaders = {'Content-Type': 'application/json'};

      $http({
        method: requestType,
        url: requestURL,
        headers: requestHeaders
      }).success(function(data, status, headers, config) {
        requestHeaders = new Object();
        requestHeaders['access-token'] = headers('access-token');
        requestHeaders['token-type'] = headers('token-type');
        requestHeaders['client'] = headers('client');
        requestHeaders['expiry'] = headers('expiry');
        requestHeaders['uid'] = headers('uid');

        console.log("::: AUTH HEADERS :::");
        console.log(status);
        console.log("|||");
        console.log(data);
        console.log("|||");
        console.log(requestHeaders);
        console.log("....................");

And I got in browser console:

::: AUTH HEADERS :::
apiwrapper.js:228 200
apiwrapper.js:229 |||
apiwrapper.js:230 Objectdata: Object__proto__: Object
apiwrapper.js:231 |||
apiwrapper.js:232 Objectaccess-token: nullclient: nullexpiry: nulltoken-type: nulluid: null__proto__: Object
apiwrapper.js:233 ....................

What am I doing wrong? How can I read headers in my Angular app properly?

P.S> Previously it was working and read headers this way successful when Angular was a part of Rails project.

Now I use rack-cors on the API serverside. Added to config/application.rb: 

config.middleware.use Rack::Cors do 
  allow do
    origins '' resource '', :headers => :any, :methods => [:get, :post, :put, :delete] 
 end 
end

to allow requests from external apps.

Funny Cherry

unread,
Apr 18, 2015, 9:03:23 AM4/18/15
to ang...@googlegroups.com
The solution was to change rack-cors config on API server:

# config/application.rb
config.middleware.use Rack::Cors do
allow do
origins '*'
resource '*', :expose => ['access-token', 'token-type', 'client', 'expiry', 'uid'], :headers => :any, :methods => [:get, :post, :put, :delete]
end
end
end

I've added headers name explicitly 
:expose => ['access-token', 'token-type', 'client', 'expiry', 'uid']

Problem solved. 


пятница, 17 апреля 2015 г., 17:34:24 UTC+7 пользователь Funny Cherry написал:

I do HTTP request using $http from my Angular Yeoman app to JSON API service based on Ruby on Rails and set.

I have a controller

angular.module('myApp')
  .controller('ApiwrapperCtrl', [ '$scope', '$http', '$log', '$rootScope', 'PubNub', '$cookies','$cookieStore', '$window', function($scope, $http, $log, $rootScope, PubNub, $cookies, $cookieStore, $window) {
....
And method sending request to API:
    $scope.useHttp = function() {
Reply all
Reply to author
Forward
0 new messages