javascript - Headers not showing in fetch response

Question

I can see the header "x-auth-token" in Chrome DevTools.

However, the header is not showing up in my fetch response. Please assist so I can use header data.

I am using NodeJS as my backend API and ReactJS as my front-end. These are my files.

NodeJS middleware - cors.js

module.exports = function enableCorsSupport(app) {
  app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Methods", "POST, GET, PUT, DELETE");
    res.header("Access-Control-Allow-Headers", "Content-Type, x-auth-token");
    res.header("Access-Control-Expose-Headers", "x-auth-token");
    next();
  })
}

NodeJS route - users.js

router.post('/login', async (req, res) => {

  // NOTE: code left out so post would be smaller

  const token = user.generateAuthToken();
  res.header('x-auth-token', token).send(_.pick(user, ['_id', 'firstName', 'email', 'isAdmin']));
})

ReactJS - my fetch request

fetch('http://localhost:4000/api/users/login', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      email: this.props.email,
      password: this.props.password
    })
  })
  .then(res => {
    console.log('res.headers', res.headers)
    return res.json()
  })
  .then(data => {
    console.log(data);
  })
  .catch((err) => {
    console.log(err)
  })
}

This is in my Chrome console from the console.log in my successful fetch request. Headers are empty in the header response. Please advise. FYI this is user test data.

Answer 1

The Header object is not empty. It is just not a regular object so it doesn't have its contents as properties on its instance. As such you won't see the headers / values in a console.log view.

To get a particular header's value you need to use the get() method

var token = response.headers.get('x-auth-token');
console.log(token);

You can also loop through it using for ... of

for(const header of response.headers){
   console.log(header);
}

Demo

fetch('https://cors-anywhere.herokuapp.com')
.then(res=>{
  for(const header of res.headers){
    console.log(`Name: ${header[0]}, Value:${header[1]}`);
  }
});