title: Cookie not being set in browser - CORS/Port issue
body: <p><strong>Context:</strong></p>
  
  <p>I just split up my existing Next.js/Express app using Lerna, separating the Next.js server (serving the front end on <code>localhost:3000</code>) and my express server (serving the API on <code>localhost:4000</code>). As a result, I had to create an <code>axios</code> instance with the default <code>{baseUrl: localhost:4000}</code>, so my relative path calls will continue to work (ie. <code>axios.post('/api/auth/login', {...})</code>). This was all working before, when the server was serving both the API and the Nextjs app.</p>
  
  <p><strong>Problem</strong>:</p>
  
  <p>After this switch, my Authentication flow no longer works properly. After logging in as usual, a page refresh will erase any memory of the user session. As far as I can tell, the Cookie is not being set. I cant see it in my dev-tools, and when the app makes a subsequent call, no cookies are present.</p>
  
  <p>When my app mounts, it makes a call to <code>api/me</code> to see if the user is logged in. If they are, it will respond with the user information to hydrate the app with the users info. If they aren't, it wont do anything special. This request to <code>/api/me</code> no longer contains the persistent cookie set in place by the login call. (dev-tools shows the <code>Set-Cookie</code> header being returned as expected from the original login request)</p>
  
  <p><strong>Possibly Useful information:</strong> </p>
  
  <ul>
  <li>Depending on how I run my app, (debugging in VSCode vs running both <code>yarn dev</code> commands in terminal) I will get a CORS error. I am using the <code>cors</code> package with no configuration: <code>app.use(cors())</code></li>
  <li>The call made to <code>/api/me</code> when the application mounts looks like this: </li>
  </ul>
  
  <pre><code>// API.js
  
  `export default axios.create({baseURL: 'http://localhost:4000'})`
  
  // app.js
  import API from 'API'
  API({
        method: 'get',
        url: '/api/me'
      })
        .then(r =&gt; {
          //...
        })
  </code></pre>
  
  <ul>
  <li>I am setting the cookie using this function</li>
  </ul>
  
  <pre><code>function setCookie(res, token, overwrite, sameSite = true) {
    res.cookie(cookieName, token, {
      httpOnly: true,
      sameSite: sameSite,
      secure: process.env.NODE_ENV === 'production',
      expires: new Date(Date.now() + cookieExpiration),
      overwrite: !!overwrite
    })
  }
  </code></pre>
  
  <p><strong>Suspicions</strong> </p>
  
  <ul>
  <li>It is some cors policy I'm not familiar with</li>
  <li>It is because of <code>sameSite</code> (<a href="https://stackoverflow.com/a/50370345/2780176">thought it wouldn't matter</a>)</li>
  </ul>