Headers Not Showing In Fetch Response

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

Solution 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]}`);
  }
});

Solution 2:

With Node.js I found this solution, using exposedHeaders:

const cors = require('cors');
const express = require('express');

// ..........

var app = express();
app.use(cors({
  exposedHeaders: ['x-auth-token'],
}));

And for read, it's ok:

x_auth_token = res.headers.get('x-auth-token');

Solution 3:

The other way of exposing x-auth-token header is

  res
    .header("x-auth-token", token)
    .header("access-control-expose-headers", "x-auth-token")
    .json(data);