Node.js : newly created header (res.header) not appearing in Chrome - node.js

Question

I'm fairly new to JavaScript, Express & NodeJS. I'm having trouble where I'm trying to create a new header that contain a token when user login (as shown below in login POST router)
// Login POST Router
router.post('/login', async (req, res) => {
// 1. Validatation
const {error} = loginValidation(req.body)
// if has error don't save
if(error) return res.status(400).send(error.details[0].message)
// 2. Check the existance of user/email in db
const userEmail = await User.findOne({email: req.body.email})
// if 'same/exist', then throw 'message/error'
if(!userEmail) return res.status(400).send(`Email doesn't exist!`)
// 3. Chack password (is correct)
const validPassword = await bcrypt.compare(req.body.password, userEmail.password)
if(!validPassword) return res.status(400).send(`Invalid password!`)
// 4. Create & assign token to user
const token = jwt.sign({_id: userEmail._id}, process.env.TOKEN_LOGINUSER)
// add 'token' to header - just for identifier (can be any name)
res.header('auth-token', token).json({ message: 'Logged In'})
})
Where then the login page that make the fetch request (login.js coded in Vanilla JavaScript) will do a redirect to a home page (as shown below in login.js - Login page)
if(loginRespond === 'Logged In') {
let homeURL = '/index.html'
window.location.replace(homeURL)
}
then back in NodeJS, i have a router for home or '/' that use a function to verify the token first (as shown below)
router.get('/', verify, async (req, res) => {
const data = await All.findById({ _id: req.user._id})
res.json(data.data)
})
and have a JSON Web token verify function (as shown below)
// Middleware function
function verify(req, res, next) {
// get token from header
const token = req.header('auth-token')
// if have, then allow. If don't have, then don't allow
if(!token) return res.status(401).json({ message: 'Accessed denied!' })
try {
// verify the exist token
const varified = jwt.verify(token, process.env.TOKEN_4LOGINUSER)
req.user = varified
next()
} catch(err) {
res.status(400).json({ message: 'Invalid token!' })
}
}
And these are my Middlewares
// B. Global Middleware
// 1. Handle cors
app.use(cors())
// 2. Handle JSON body-parser
app.use(express.json())
Everything works fine when testing it with Postman. But unfortunately, not with the live site. Since auth-token was never created and can't be found in Response Header of the homepage in Chrome (as shown below)
Since I'm new to express & nodejs, I don't actually know how to tackle this prob. I've try searching it through google. But can't find the right sentence or keyword to search for.
Hope you guys can point me where to look at and what should I read or learn before attempting to do this.

Answer 1

You will need to expose your custom header by adding an Access-Control-Expose-Headers header.
res
.header('Access-Control-Expose-Headers', 'auth-token')
.header('auth-token', token)
.json({ message: 'Logged In'})
This is required for it to work in the browser but not for Postman.
The Access-Control-Expose-Headers response header indicates which headers can be exposed as part of the response by listing their names.
As an alternative, you can provide a custom options parameter to your cors middleware: app.use(cors({ exposedHeaders: 'auth-token' })). It expects a comma-delimited string (ex: ‘Content-Range,X-Content-Range’) or an array (ex: ['Content-Range', 'X-Content-Range']).
Follows documentation on this from MDN.
By default, only the 7 CORS-safelisted response headers are exposed:
Cache-Control
Content-Language
Content-Length
Content-Type
Expires
Last-Modified
Pragma
If you want clients to be able to access other headers, you have to list them using the Access-Control-Expose-Headers header.