title: Why does Heroku Node/Express site give CORS header error on all computers except development machine?
body: <p>I'm trying to get a test React frontend and Node/Express backend to correctly set session cookies at Heroku.</p>
  <p>This frontend/backend work locally.</p>
  <p>This frontend/backend work at Heroku in every browser on my development machine.</p>
  <p>But on every other machine I have tested (Windows, Ubuntu), I get this Cross-Origin-Request-Blocked error:</p>
  <p><a href="https://i.stack.imgur.com/Hl6fm.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hl6fm.png" alt="enter image description here" /></a></p>
  <p>Here is the backend code, where I configure CORS origin correctly:</p>
  <pre><code>import express from 'express'
  import cors from 'cors'
  import morgan from 'morgan'
  import session from 'express-session';
  import dotenv from 'dotenv';
  import cookieParser from 'cookie-parser';
  
  dotenv.config();
  const app = express();
  
  app.use(morgan(&quot;dev&quot;));
  app.set('trust proxy', 1);
  app.use(cors({
      origin: process.env.FRONTEND_ORIGIN,
      credentials: true
  }));
  
  app.use(cookieParser());
  app.use(session({
      name: 'testsession',
      secret: 'h$lYS$cr§t!',
      resave: true,
      saveUninitialized: true,
      cookie: {
          httpOnly: true,
          maxAge: 60 * 60 * 24,
          sameSite: process.env.NODE_ENV === &quot;production&quot; ? &quot;none&quot; : &quot;lax&quot;,
          secure: process.env.NODE_ENV === &quot;production&quot;
      }
  }))
  
  app.get('/', (req, res) =&gt; {
      let user = req.session.user;
      if (!user) {
          res.json({ message: `${(new Date()).toISOString()}: nobody is logged in` })
      } else {
          res.json({ message: `${(new Date()).toISOString()}: ${user} is logged in` })
      }
  });
  
  app.get('/login', (req, res) =&gt; {
      req.session.user = &quot;user001&quot;
      res.json({
          message: `${(new Date()).toISOString()}: ${req.session.user} is now logged in`
      })
  })
  
  app.get('/logout', (req, res) =&gt; {
      req.session.destroy();
      res.json({ message: `${(new Date()).toISOString()}: user logged out` })
  });
  
  const PORT = process.env.PORT || 3011
  app.listen(PORT, () =&gt; {
      console.log(`API listening on http://localhost:${PORT}`);
  });
  </code></pre>
  <p>Here is my frontend code:</p>
  <pre><code>import { useState } from 'react';
  import './App.scss';
  
  function App() {
      const [message, setMessage] = useState('click a button');
      const backendUrl = process.env.REACT_APP_BACKEND_URL;
  
      const handle_checkuser = async () =&gt; {
          const requestOptions = {
              method: 'GET',
              credentials: 'include'
          };
          const response = await fetch(backendUrl, requestOptions);
          const data = await response.json();
          setMessage(data.message);
      }
  
      const handle_login = async () =&gt; {
          const requestOptions = {
              method: 'GET',
              credentials: 'include'
          };
          const response = await fetch(`${backendUrl}/login`, requestOptions);
          const data = await response.json();
          setMessage(data.message);
      }
  
      const handle_logout = async () =&gt; {
          const requestOptions = {
              method: 'GET',
              credentials: 'include'
          };
          const response = await fetch(`${backendUrl}/logout`, requestOptions);
          const data = await response.json();
          setMessage(data.message);
      }
  
      return (
          &lt;div className=&quot;App&quot;&gt;
              &lt;div&gt;&lt;button onClick={handle_checkuser}&gt;checkuser&lt;/button&gt;&lt;/div&gt;
              &lt;div&gt;&lt;button onClick={handle_login}&gt;login&lt;/button&gt;&lt;/div&gt;
              &lt;div&gt;&lt;button onClick={handle_logout}&gt;logout&lt;/button&gt;&lt;/div&gt;
              &lt;div&gt;{message}&lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default App;
  </code></pre>
  <p><strong>Why would it be getting this CORS error with some machines and not others?</strong></p>
  <p>Backend:</p>
  <ul>
  <li><a href="https://github.com/edwardtanguay/et-cookietest-backend" rel="nofollow noreferrer">https://github.com/edwardtanguay/et-cookietest-backend</a></li>
  <li><a href="https://et-cookietest-backend.herokuapp.com" rel="nofollow noreferrer">https://et-cookietest-backend.herokuapp.com</a></li>
  </ul>
  <p><a href="https://i.stack.imgur.com/LgapH.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LgapH.png" alt="enter image description here" /></a></p>
  <p>Frontend:</p>
  <ul>
  <li><a href="https://github.com/edwardtanguay/et-cookietest-frontend" rel="nofollow noreferrer">https://github.com/edwardtanguay/et-cookietest-frontend</a></li>
  <li><a href="https://et-cookietest-frontend.herokuapp.com" rel="nofollow noreferrer">https://et-cookietest-frontend.herokuapp.com</a></li>
  </ul>
  <p><a href="https://i.stack.imgur.com/afvHV.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/afvHV.png" alt="enter image description here" /></a></p>
  <h1>ADDENDUM</h1>
  <p>I also noticed that on every other machine except for my development machine, the HTTP connection is not secure. This seems to be the cause of the cookie-setting problem.</p>
  <p><strong>But how can that be?</strong> Why would one particular computer receive HTTPS connections from a website and others HTTP?</p>
  <p><a href="https://i.stack.imgur.com/EnI7N.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/EnI7N.png" alt="enter image description here" /></a></p>
  <p><a href="https://i.stack.imgur.com/iVd8C.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/iVd8C.png" alt="enter image description here" /></a></p>