Search code examples
node.jsvue.jsexpress-session

NodeJS, VueJS, express-session. Cookies don't set on client side


I work with app, that already has its own infrastructure. The task is to integrate session-cookie mechanism. I spent a lot of time to understand why cookies doesn’t set on client side.

I. Briefly.

App settings:

Server: NodeJS Port: 8081

Client: VueJS Port: 8088

I use module "express-session" to initialize session mechanism on server side and send cookies to client. Client hasn’t set cookies.

II. Details:

Server’s root file is index.js.

I do the following in it:

Plug in express module:

const express = require('express')
  1. Plug in cors module:
const cors = require('cors')
  1. Add cors settings:
app.use(cors({
    origin: 'http://localhost:8088',
    credentials: true
}))

Then I initialize session in user.js file and receive client’s connects: Plug in express-session module:

const session = require('express-session')
  1. Plug in routing by express.Router():
const router = express.Router()
  1. Add session settings:
const EIGHT_HOURS  = 1000 * 60 * 60 * 2
const {
    SESS_NAME = 'sid',
    SESS_LIFETIME = EIGHT_HOURS,
    SESS_SECRET = 'test',
    NODE_ENV = 'development'
} = process.env
const IN_PROD = NODE_ENV === 'production'
  1. Initialize session:
router.use(session({
    name: SESS_NAME,
    resave: false,
    saveUninitialized: false,
    secret: SESS_SECRET,
    cookie: {
        maxAge: SESS_LIFETIME,
        sameSite: false,
        // Must have HTTPS to work 'secret:true'
        secure: IN_PROD
    }
}))
  1. Receive client queries by router.post()

App client side consists of a lot of files. Client send data to NodeJS server by Axios module.

I read several articles by this theme and I guess that server side settings, which I made, are enough for work session-cookie mechanism. That means, that problem is on Vue side.

What I made:

  1. I set in all files, where Axios send data to server, parameter withCredentials in true value (withCredentials: true) to pass CORS restrictions. This didn’t help

  2. App in production has other URLs for accessing the production NodeJS server. I set develop NodeJS server URL in all client side files. This didn’t help

  3. Read this article: Vue forum. From this article I understood, that need to solve this problem by axios.interceptors (StackOverFlow forum). I supposed that if this setting set on one of the client’s side pages, may be cookies should work at least on this page. This didn’t help. Tried to set setting like this:

axios.defaults.withCredentials = true

And that:

axios.interceptors.request.use( function (config) {
                console.log('Main interceptor success')
                config.withCredentials = true;
                return config;
            },
                function(error) {
                    // Do something with request error
                    console.log('Main interceptor error')
                    return Promise.reject(error);
                }
            )

This didn’t help

Please, tell me in which direction I should move? Is that right, that on client side on absolutely all pages must be axios.defaults.withCredentials = true setting to initialize cookies mechanism? What details I miss? If I set session-cookies from scratch the mechanism works.


Solution

  • I resolve this issue. I need to look for cookie storage in another browser place:

    Chrome server cookie storage