session not persisting in development (localhost:4200)

Question

I am using angular (frontend) and node.js + express (backend). When I run my app on localhost:3000 (the port the express app is runing on) everything is correct and I notice that the request session ID is the same even if I refresh the page. However when I want to work in dev mode on localhost:4200 the session is not persistent anymore and each time I refresh the page I have a new session ID displayed.

app.js

const bodyParser = require('body-parser'),
  cookieParser = require('cookie-parser'),
  cors = require('cors'),
  express = require('express'),
  session = require('express-session');

const app = express();

app.use(cors());


const port = process.env.PORT || '3000';
app.set('port', port);

const server = http.createServer(app);

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));

app.use(cookieParser());

app.use(session({
  secret: 'MY-KEY',
  resave: false,
  saveUninitialized: false,
  store: new MongoStore({ mongooseConnection: mongoose.connection })
}));

app.use(passport.initialize());
app.use(passport.session());

server.listen(port, () => console.log(`API running on localhost:${port}`));

I am also using a proxy when in dev mode as below:

proxy-conf.json

{
  "/api/*": {
    "target": "http://localhost:3000",
    "secure": false,
    "logLevel": "debug",
    "changeOrigin": true
  }
}

No proxy key in your session config OLN is likely the culprit unless you have express trust proxy settings someplace else. https://github.com/expressjs/session#proxy and here: https://stackoverflow.com/questions/30802322/node-js-express-session-what-does-the-proxy-option-do — Randy Casburn, May 23 '19 at 14:54
Not sure, the proxy you are talking about is for the node.js the proxy in my post is for the angular app — Observablerxjs, May 23 '19 at 14:58
Ah, I see now. In that case try one of two options: 1) comment out the Allow-Methods header or 2) add "HEAD" to the list of allowed methods. — Randy Casburn, May 23 '19 at 15:37

score 1 · Answer 1 · answered May 23 '19 at 16:59

Found it, I had to: add localhost:4200 to a whitelist, set cookie.secure to false in the session

app.js

var whitelist = ['http://localhost:4200'];

var corsOptions = {
  origin: function(origin, callback) {
    if (whitelist.indexOf(origin) === -1) {
      callback(new Error('Not allowed by CORS'));
    } else {
      callback(null, true);
    }
  },
  credentials: true,
};

app.use(cors(corsOptions));
.
.
app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  res.header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
  next();
});
.
.
app.use(session({
  secret: 'My-Key',
  resave: false,
  saveUninitialized: true,
  cookie: { secure: false },
  store: new MongoStore({ mongooseConnection: mongoose.connection })
}));

and in every Http request header add:

withCredentials: true

as

isLoggedIn(): Observable < boolean > {
    return this.http.get(ip + 'api/isAuthenticated', { withCredentials: true }).map(response => response.json());
}

session not persisting in development (localhost:4200)

1 Answers1