title: Send an express-session generated session ID cookie to a different-origin React front end
body: <p>I'm making a web app. My back end uses Node.js, Express.js, and specifically, it uses the module express-session to create a session object for <a href="https://medium.com/@sherryhsu/session-vs-token-based-authentication-11a6c5ac45e4" rel="nofollow noreferrer">session-based authentication</a> in order to persist a user login. I understand that when I use express-session to create a session, a cookie with the session ID is created on the back end and sent to the browser on the front end. I have verified that this cookie sends seamlessly when I use my browser and visit the page the Express app is hosted on (in my case, <code>localhost:3001</code>).</p>
  <pre><code>// My Express app's index.js file
  // This code seamlessly sends a session ID cookie to the browser when I visit http://localhost:3001
  
  const express = require('express');
  const session = require('express-session');
  const mongoDbStore = require('connect-mongodb-session')(session);
  const app = express();
  const store = new mongoDbStore({
      uri: 'mongodb://localhost:27017/GameDB',
      collection: 'UserSessions'
  });
  
  store.on('error', (err) =&gt; {
      console.log('Something exploded:' + err);
  });
  
  app.use(session({
      secret: 'I am stuck, help me please!',
      store: store,
      saveUninitialized: true,
      resave: false,
  } ));
  
  app.listen(3001, () =&gt; {
      console.log('server started on 3001');
  })
  </code></pre>
  <p>And I get my cookie just fine. Here's a screenshot in my Chrome developer tools:</p>
  <p><a href="https://i.stack.imgur.com/t0G0g.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/t0G0g.png" alt="enter image description here" /></a></p>
  <p>However, I want my front end to be a separate app (I'm using React), and I want to use API requests from my front end to access everything on my back end. As the front end and back end are separate apps, they will need to run on different ports. My front end will run on port 3000 and my back end will continue to run on port 3001. And with that in mind, I'll be running <code>localhost:3000</code> in my browser instead of <code>localhost:3001</code>.</p>
  <p>The only problem is, with these changes, the cookie made by express-session no longer gets sent to my browser, even when I do an HTTP POST (via JavaScript <code>fetch()</code>) from my front end to my back end and get a valid response back.</p>
  <p>In a nutshell, my question is: <strong>how can I have my express-session session ID cookie saved to my browser when I'm using a separate app for the front end?</strong></p>
  <p>Here's my front end API request:</p>
  <pre><code>fetch('http://localhost:3001/gimmecookie', {
      method: 'POST',
      headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json',
      },
      body: JSON.stringify({ data: &quot;data&quot; })
  })
  .then(response =&gt; response.json() )
  .then(response =&gt; {
      console.log(response)
  })
  .catch((error) =&gt; {
      console.error(error);
  });
  </code></pre>
  <p>And here's the slightly-modified-from-before index.js file for my Express app:</p>
  <pre><code>// My Express app's index.js file that *should* create and 
  //   send a session-id cookie to my React project
  
  const express = require('express');
  const cors = require('cors');
  const session = require('express-session');
  const mongoDbStore = require('connect-mongodb-session')(session);
  const app = express();
  
  const corsOptions = {
      origin: 'http://localhost:3000',
  }
  
  const store = new mongoDbStore({
      uri: 'mongodb://localhost:27017/GameDB',
      collection: 'UserSessions'
  });
  
  store.on('error', (err) =&gt; {
      console.log('Something exploded:' + err);
  });
  
  app.use(cors(corsOptions));
  
  app.use(session({
      secret: 'I am stuck, help me please!',
      store: store,
      saveUninitialized: true,
      resave: false,
  }));
  
  app.post('/gimmecookie', (req, res) =&gt; {
      res.json({ sendsome: &quot;data&quot; })
  });
  
  app.listen(3001, () =&gt; {
      console.log('server started on 3001');
  });
  </code></pre>
  <p>Right now, I'm using a hack to send the cookie (creating a cookie in JS and sending it manually), but the hack is getting more and more tiresome as my project gets bigger. What do I need to add to this code to have the cookie send like when I was using just one app? Is express-session just not designed for this? (It seems like it would be, I know it is extremely common to have a separate app for both front end and back end.)</p>
  <p>Should I expect the cookie to send automatically if the front end and back end have any sort of handshake? Do I need to mess with the <code>cookie.domain</code> or <code>cookie.sameSite</code> attributes in the express-session initialization object? Do I need to mess with CORS or the <code>fetch()</code> <code>Accept</code> header? Is <code>res.json()</code> the wrong method to use? Is it easier to deal with a real IP and not <code>localhost</code>? I've tried a bunch of things, but I no matter what I do, I can't get that blasted express-session generated session ID cookie on my browser.</p>