CODEWITHSUNDEEP
rubyangularjssinatracors
0x4139
0x4139

Reputation: 73

Cross domain session with Sinatra and AngularJS

I am using Sinatra as a webservice and angularjs to make the calls

post '/loginUser' do
    session[:cui]=user['cui']
end
get '/cui' do
  return session[:cui].to_s
end

But it doesn't seem to work (the '/cui' call returns an empty string) any help would be greatly apreciated.

UPDATE: setting this in sinatra headers['Access-Control-Allow-Credentials'] = 'true' allows me to send the session, but it seems like $http directive is not using the browsers cookies

Upvotes: 1

Views: 1240

Answers (2)

0x4139
0x4139

Reputation: 73

on the sinatra app 

before do
  headers['Access-Control-Allow-Methods'] = 'GET, POST, PUT, DELETE, OPTIONS'
  headers['Access-Control-Allow-Origin'] = 'http://localhost:4567'
  headers['Access-Control-Allow-Headers'] = 'accept, authorization, origin'
  headers['Access-Control-Allow-Credentials'] = 'true'
end

angularjs app

host='http://127.0.0.1:5445/'
@viewController = ($scope,$http)->
  $scope.getCui = ()->
    $http.get(host+'cui',{ withCredentials: true}).success (data)->
      $scope.cui=data
      console.log data

Explanation: AngularJS uses his own cookie system, so we need to specify that we can pass the cookies trough the $http.get call using the {withCredentials:true} configuration object. Sinatra needs to accept the cross domain cookies so we need the headers mentioned above. Note: 'Access-Control-Allow-Origin' header cannot be wildcard.

Upvotes: 2

random-forest-cat
random-forest-cat

Reputation: 35964

One option around this would be to configure a http server with a proxy pass, so you could hit the same domain without incurring a cross origin error. That way you can continue to properly maintain your abstractions as 2 separate apps.

Here is a brief example with nginx: 

upstream angular_app {
  server localhost:3003;
}

upstream sinatra_app {
  server localhost:3004;
}

server {
  listen 80;
  server_name  local.angular_app.com;
  root /Users/username/source/angular_app/;

  location / {
    proxy_set_header Host $http_host;
    proxy_redirect off;
  }

  location ~ ^/api/(.*)$ {
    proxy_set_header Host $http_host;
    proxy_read_timeout 1200;
    proxy_pass http://sinatra_app/;
  }
}

By routing at the server level, you can successfully bypass domain restrictions AND you can keep the applications separate.

Upvotes: 1

Related Questions