标题未显示在获取响应中

Question

我可以看到标题＆＃34; x-auth-token＆＃34;在Chrome DevTools中。

但是，我的提取响应中没有显示标题。 请协助，以便我可以使用标题数据。

我使用NodeJS作为我的后端API，使用ReactJS作为我的前端。 这些是我的文件。

NodeJS中间件 - 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 - 我的获取请求

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

我的Chrome控制台位于我成功提取请求中的console.log中。标头响应中的标头为空。请指教。仅供参考，这是用户测试数据。

Answer 1

Header对象不为空。它不是常规对象，因此它的内容不是其实例上的属性。因此，您无法在console.log视图中看到标头/值。

要获取特定标头的值，您需要使用get()方法

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

您也可以使用for ... of

循环播放它

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

演示

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 2

使用Node.js，我使用 exposedHeaders 找到了该解决方案：

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

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

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

可以阅读：

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

Answer 3

另一种暴露 x-auth-token 标头的方式是

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