http - 从响应中读取授权 header

Question

我正在做一个副项目，我想在其中重用现有的 API。API 有一个 /auth 端点，它处理 POST 请求并期望请求正文中有 email 和 password。如果验证了 email 和 password，则服务器返回一个响应，其中包含一个 Authorization header ，该 header 包含 token 的值，应该是发送所有后续请求。

我在从响应中检索此 header 时遇到问题。它在 Postman 和 Chrome 开发工具(网络部分)中都可见。 Chrome 开发工具: 响应 header 的 console.log

我已经尝试了多个用于发送请求的库/实现(superagent、request、fetch 实现，甚至是 XMLHttpRequest)，但是，当我在 Chrome 开发工具中查看它们时，我得到的所有响应在响应 header 中都有 Authorization header ，但是当我尝试从 javascript 访问 header 时，我总是最终只得到 Content-Type header 。

我在其他几个答案中读到，服务器必须使用 指定 Access-Control-Expose-Headers 或 Access-Control-Allow-Headers >Authorization header 中的值，但是，我无权访问服务器并且 API 上没有与此问题相关的问题，所以我猜测我在发送请求时遗漏了一些东西。

有什么想法吗？

这里是使用fetch的请求

return fetch(endpoint, {
    method: 'post',
    body: data,
    headers: {
      [API_KEY_HEADER]: apiKey
    }
  }).then(r => {
    console.log(r);
    console.log(r.headers)
  });

这里是使用request的请求

r({
    url: endpoint,
    method: 'post',
    headers: {
      [API_KEY_HEADER]: apiKey
    }
  }).then(r => {
    console.log(r);
    console.log(r.headers);
  })

这里是普通的 XMLHttpRequest

  const request = new XMLHttpRequest();

  request.open('POST', endpoint);

  request.setRequestHeader('Content-Type', 'application/json');
  request.setRequestHeader(API_KEY_HEADER, apiKey);

  request.onreadystatechange = function () {
    if (this.readyState === 4) {
      console.log('Status:', this.status);
      console.log('Headers:', this.getAllResponseHeaders());
      console.log('Body:', this.responseText);
    }
  };

  const body = {
    'email': 'dummy@test.com',
    'password': 'secret!'
  };

  request.send(JSON.stringify(body));

Answer 1

晚了 2 年，但希望这能帮助遇到同样问题的人:

正如@shaochuancs 所说，Authorization header 在响应中不是标准的，因此服务器必须显式通知才能公开它。为此，服务器必须添加以下 header :

Access-Control-Expose-Headers: 授权

来源:https://www.yukei.net/2016/01/getting-response-headers-data-from-an-ajax-request-with-jquery/