web-dev-qa-db-ja.com

ヘッダーがフェッチ応答に表示されない

Chrome DevTools。 でヘッダー「x-auth-token」を確認できます。enter image description here

ただし、ヘッダーがフェッチ応答に表示されません。ヘッダデータが使えるようにお手伝いしてください。

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ルート-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)
  })
}

これはmy Chrome console from the console.log from my console fetch request.Header is empty in the header response。助言してください。これはユーザーテストデータです。 enter image description here

javascriptnode.jsfetch
7
user4851649

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');
2
Paolo Arena