Node.js : 新创建的 header (res.header) 未出现在 Chrome 中

Question

我对 JavaScript、Express 和 NodeJS 还很陌生。我在尝试创建一个新的 header 时遇到问题，其中包含用户登录时的令牌（ 如下所示，登录 POST 路由器 ）

// 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'})
})

然后发出获取请求的登录页面（login.js 编码为 Vanilla JavaScript）将执行 重定向 到主页（ 如下所示 login.js - 登录页面 ）

if(loginRespond === 'Logged In') {

    let homeURL = '/index.html'
    window.location.replace(homeURL)
 }

然后回到 NodeJS，我有一个用于 home 或 '/' 的路由器，它首先使用一个函数来验证令牌（如下所示)

router.get('/', verify, async (req, res) => {

    const data = await All.findById({ _id: req.user._id})
    res.json(data.data)
})

并且有一个JSON网络令牌验证功能（如下图）

// 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!' })
    }
}

这些是我的 中间件

// B. Global Middleware
// 1. Handle cors
app.use(cors())
// 2. Handle JSON body-parser
app.use(express.json())

使用 Postman 测试时一切正常。但不幸的是，现场没有。由于 auth-token 从未创建，因此无法在 Chrome 主页的 Response Header 中找到] (如下图)

由于我是 express & nodejs 的新手，所以我实际上不知道如何解决这个问题。我尝试通过 google 搜索它。但是找不到合适的句子或关键字来搜索。

希望你们能指出我在哪里看，在尝试这样做之前我应该阅读或学习什么。

Answer 1

您需要通过添加 Access-Control-Expose-Headers header.

来公开您的自定义 header

res
    .header('Access-Control-Expose-Headers', 'auth-token')
    .header('auth-token', token)
    .json({ message: 'Logged In'})

这是它在浏览器中工作所必需的，但对于 Postman 则不是。

Access-Control-Expose-Headers 响应 header 表明哪些 header 可以通过列出其名称作为响应的一部分公开。

作为替代方案，您可以为 cors 中间件提供自定义选项参数：app.use(cors({ exposedHeaders: 'auth-token' }))。它需要一个 comma-delimited 字符串（例如：‘Content-Range,X-Content-Range’）或一个数组（例如：['Content-Range', 'X-Content-Range']）。

关注 documentation on this from MDN。

默认情况下，仅公开 7 CORS-safelisted 个响应 header：

Cache-Control
Content-Language
Content-Length
Content-Type
过期
Last-Modified
编译指示

如果您希望客户端能够访问其他 header，您必须使用 Access-Control-Expose-Headers header.

列出它们

Node.js : 新创建的 header (res.header) 未出现在 Chrome 中

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

node.js

express

jwt

token

response-headers