title: The "x-auth-token" header in Router.all() returns undefined
body: <p>I am currently building an application using React for frontend and Nodejs for backend powered by Express.js.
  I'm using jsonwebtoken for security method and applying a middleware called <code>auth.js</code> to authorize the request on every endpoints that starts with <code>/rest</code>, here is the code for <code>auth.js</code>:</p>
  
  <pre><code>const token = req.header('x-auth-token');
  console.log(token); // Get the token from 'x-auth-token' header
  if (!token) {
      return res.status(400).json({ msg: 'Authorization denied. ' });
  }
  
  try {
      // validate the token
      next();
  } catch (e) {
  
      return res.status(401).json({ msg: 'Invalid token. '})
  }
  </code></pre>
  
  <p>and the routing for <code>/rest/*</code> endpoints:</p>
  
  <pre><code>router.all("/", auth, (req, res) =&gt; {
      // some codes
  });
  </code></pre>
  
  <p>the request:</p>
  
  <pre><code>fetch(url + "/rest", {
      method: "GET",
      mode: "cors",
      headers: {
          "x-auth-token" : "this is the token" // define the header 
          "Accept" : "application/json",
          "Content-Type" : "application/json",
      }
  });
  </code></pre>
  
  <p>The <code>router.all()</code> mechanism works fine, I'm able to access every <code>/res</code> routes with all methods. The problem is, the value of the <code>x-auth-token</code> header in the <code>auth.js</code> middleware always gives "undefined". when I change the routing to <code>route.get()</code> or <code>route.post()</code> etc.., that value of the <code>x-auth-token</code> returns the token from client correctly.</p>
  
  <p>Am I missing something with the work around this <code>router.all()</code>? Thank you all.</p>
  
  <hr>
  
  <p>EDIT: here's my cors middleware</p>
  
  <pre><code>module.exports = cors = (req, res, next) =&gt; {
      res.setHeader('Access-Control-Allow-Origin', {domain});
      res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
      res.setHeader('Access-Control-Allow-Headers', 'X-Requested-With, Content-Type , Accept, x-auth-token');
      res.setHeader('Access-Control-Allow-Credentials', true);
      next();
  }
  </code></pre>
  
  <hr>
  
  <p>SOLVED:
  So turns out, the reason why my <code>x-auth-token</code> header is missing in the <code>req</code> is because of the <a href="https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request" rel="nofollow noreferrer">Pre-flight request</a> mentioned by @Marcos Casagrande.
  Now, what I went with is installing the <a href="https://www.npmjs.com/package/cors" rel="nofollow noreferrer">CORS</a> package and configured it following the <a href="https://expressjs.com/en/resources/middleware/cors.html" rel="nofollow noreferrer">Express documents</a> and ended up with the following snippet in the <code>server.js</code> file since I want that <code>cors</code> configuration to be applied on every endpoints:</p>
  
  <pre><code>let cors = require("cors");
  let whitelist = [{domains}]
  let corsOptions = {
      origin: (origin, callback) =&gt; {
          if (whitelist.indexOf(origin) !== -1 || !origin) {
              callback(null, true)
          } else {
              callback(new Error('Not allowed by CORS'))
          }
      }
  }
  app.use(cors(corsOptions));
  </code></pre>
  
  <p>Thank you all for helping me out.</p>