Superagentのカスタムヘッダーが取得できない

Question

SuperAgentによるHttp Requestのレスポンスで、カスタムヘッダーが取得できません。
Webアプリの開発として、フロントとバックを別プロジェクトで開発しているのですが、
フロントからのリクエストはtokenをヘッダーに忍ばせる仕様になっております。
このtokenをログインAPIのレスポンスで、カスタムヘッダーから取得したいのですが、
SuperAgentでのカスタムヘッダーの取得方法がわかりません。
Chromeの開発ツールでは確認しているので、項目としては存在しているはずなのですが。。。

わかる方がいらっしゃれば、お願い致します。

SuperAgentのコードは下記の通りです。

  static post(path, header={}, body={}) {

    header['Accept']       = 'application/json';
    header['Content-Type'] = 'application/x-www-form-urlencoded';
    
    return new Promise(function(resolve, reject) {
      Request
        .post(path)
        .set(header)
        .send(body)
        .end(function(err, res) {
          console.log(res.xhr.getResponseHeader('Link'));
          console.log(res);
          console.log(res.headers);
          if (!err) {
            resolve({
              status : res.status,
              json   : JSON.parse(res.text),
            });
          } else {
            resolve({
              status : res.status,
              json   : {},
            });
          }
        });
    });
  }

SuperAgentからのレスポンスで、headersの内容は下記の通りです。

headers : {
  cache-control : "max-age=0, private, must-revalidate",
  content-type  : "application/json; charset=utf-8",
}

Answer 1

ブラウザ内のJavaScriptから特殊なレスポンスヘッダを処理したい場合、Access-Control-Expose-Headers（MDN）を指定する必要があります。

Comments

[TakakiKuwabara]

ありがとうございます。superagentを利用した場合の具体例をいただけないでしょうか。

[maisumakun]

Access-Control-Expose-Headersはサーバサイドでセットするものなので、JavaScriptコードの方に手を入れることはありません（というより、JavaScript側だけではどうしようもありません）。

[TakakiKuwabara]

ありがとうございます。ちなみにpostmanやchromeの開発ツールでheadersが見れているのですが、これはどういう原理でしょうか？

[maisumakun]

実際に来るヘッダーのうち、JavaScriptから処理できるものが「標準的な6つ」と「Access-Control-Expose-Headersとして明示されたもの」に限られるという仕組みなので、実際の通信ではすべてのヘッダーが流れています。