CODEWITHSUNDEEP
javascriptangularjsexpresscorsnode.js-connect
Tyler Shaddix
Tyler Shaddix

Reputation: 1641

Express sessions with AngularJS

I am trying to create a simple login using express and angularjs. The angular js app runs on a separate server (grunt server localhost:9000) while the express app runs on another port. For my express app, I have the following headers set:

app.all('/*', function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:9000");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE");
  res.header("Access-Control-Allow-Credentials", "true");
  next();
});

I am running angular 1.0.7, meaning that I can set some defaults in the config step:

// Add COR ability
$httpProvider.defaults.useXDomain = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

And the withCredentials on the $http request:

$http({
   method : "GET",
   withCredentials : true,
   url : apiEndpoint + '/session'
}, success);

So after logging in with my app, a session is created and a cookie can be seen in the response. Using chrome debugging tools, I can see that the connect session cookie is being sent with the next subsequent request (the session call above). On the server, however, the req.session property is still empty. Of course I could just host the angular app with express and get around all of this, but I'd rather keep the two projects/servers separate.

This is a view of the /session request, with the connect session cookie attached to the request: Cookies attached to session request

Upvotes: 2

Views: 1470

Answers (2)

Tyler Shaddix
Tyler Shaddix

Reputation: 1641

I had to mess around with a few different things to get this working. First, I upgraded to the edge angular, as some values could not be globally defaulted on $http that I needed.

In the angular config() step, I added:

// Add COR ability
$httpProvider.defaults.useXDomain = true;
$httpProvider.defaults.withCredentials = true;
delete $httpProvider.defaults.headers.common['X-Requested-With'];

In express, I created an angular middleware:

exports.angularHeaders = function(req, res, next){
    res.header("Access-Control-Allow-Origin", '{{insert your ui endpoint}}');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
    res.header("Access-Control-Allow-Credentials", "true");
    next();
};

Upvotes: 0

bekite
bekite

Reputation: 3444

So if I get your setup right, you have:

angularjs running on grunt server <---> express server

And you want to access the session on the express server? If this is the case, then you need a way to share the session between those two servers. I would recommend using the redis-connect module (there is also express-mongodb). It stores the session object in a redis database which can be accessed from both servers. I've never used the grunt server before, but I've done this using two express servers. MemoryStore wont work here, because you have two seperate processes which won't share the same memory.

Upvotes: 1

Related Questions