5

Fellow web developer here. I seem to be running into this problem (that didn't occur until recently) where the cookie Session ID gets changed on every API request.

Edit Confirms to work in IE11 & Edge!? Not Chome?! WTF! Doesn't work with fetch and credentials: "include" either..

I have a website with a secure login, however now some people cannot get logged in due to the cookie not being stored on their browser. And the weird thing is, this didn't happen in Chrome until recently! I'm not sure what happened or what changed..

In the network headers, the server comes back with a Set-Cookie header, so it seems the backend is working.

Below is a code example that is not working with my front end (React w/ Axios). I have the front end running on my main Mac machine, and the node server on a Windows laptop.

I've tried the app.set trust proxy (commented out), but that doesn't seem to change anything. Also I've been searching around and tried some stuff with the domain, but I can't seem to find anything that works. I am testing this on localhost, and the backend has a different URL than the frontend. Would this be a problem with the domain/CORS config?

Node Server

const session = require('express-session')
const cors = require('cors')

const app = express()
app.use(express.json())
app.use(cors({ credentials: true, origin: ['http://localhost:3000', 'http://192.168.100.122'] }))

// app.set('trust proxy', 1)
app.use(session({
    secret: 'SECRET_KEY_HEEEE',
    resave: false,
    proxy: true,
    saveUninitialized: true,
    // Being tested via local IP Address, this would change to secure in prod
    cookie: { secure: false, httpOnly: false, maxAge: 600000 }
}))

app.get('/', (req, res) => {
    console.log(req.sessionID)
    // Session ID changes every time I hit this request
    if (req.session.views) {
        req.session.views++
        res.send(req.session.views.toString())
    } else {
        req.session.views = 1
        res.send('Started View Count!')
    }
})

app.listen(5050, _ => console.log('Getting smacked on port 5050'))

React Frontend w/ Axios & withCredentials = true

import axios from 'axios'

axios.defaults.withCredentials = true

class App extends Component {

handleGetCookie = () => { 
        axios.get('http://192.168.100.131:5050/').then(response => {                     
    console.log(response.data) 
    // Response.data only shows "Started View Count"
    }) 
}

render() { 
    return (
         <div className="App">
             <h1>Express Sessions & MongoDB!</h1>
             <button onClick={this.handleGetCookie}>Get me a cookie!</button>
         </div>
    )
  }
}

export default App

I've tried changing the withCredentials to include, same-origin, but nothing changes...

Cookies and 3rd Party cookies are enable in my browser settings!

Any help would be much appreciated!

Whatty
  • 79
  • 2
  • 5
  • Try having the backend set the header `Access-Control-Allow-Headers: Set-Cookie`, then ensure `withCredentials: true` is used in axios. – cbr Mar 11 '20 at 19:25
  • The cors package apparently exposes this in the `allowedHeaders` configuration option. – cbr Mar 11 '20 at 19:27
  • Sorry, that might be `Access-Control-Expose-Headers` so `exposedHeaders` perhaps? – cbr Mar 11 '20 at 19:29
  • @cubrr Huh, that didn't seem to work. I added the Set-Cookie with res.setHeader('Access-Control-Expose-Headers', 'Set-Cookie'). But it didn't seem to change anything.. ): – Whatty Mar 11 '20 at 20:19
  • If you try `fetch` with its appropriate credentials type options, does it work? – cbr Mar 11 '20 at 20:23
  • Testing that out will let us see if it's axios of the browser that's not behaving the way we want it to. – cbr Mar 11 '20 at 20:24
  • @cubrr Tried that as well with credentials = 'include'.. Still no good ): It's so weird though because it works in IE! Must be a browser/chrome issue. – Whatty Mar 11 '20 at 20:24
  • @cubrr Any other suggestions?? ): – Whatty Mar 11 '20 at 21:34
  • As I understand, this problem is with certain browsers (Safari, and Chrome on mobile) not allowing 3rd party cookies (ie, if your React front-end is hosted on a different location to your server). Very confusing as I thought it would be common practice to use cookies for authentication in this situation. I don't suppose you came up with a solution? – JimmyTheCode Jan 27 '21 at 13:32

0 Answers0