Fetch 响应中缺少 headers

Question

我需要做一个CORS post request。我需要使用 fetch，因为 axios 的 response 已经处理为 json。

但在 fetch 响应中，headers 是空的。但我不认为这是服务器问题，因为 axios 响应 headers 具有我想要的值。

有什么技巧吗？

    fetch('http://localhost:9876/test/sample-download', {
        method: 'post',
        headers: {},
        body: {}
    })
        .then(response => {
            console.log(response);
        })
        .catch(err => console.error(err));

    axios.post('http://localhost:9876/test/sample-download', {}, {})
        .then(response => console.log(response))
        .catch(error => console.error(error));

Answer 1

Headers class instance that fetch returns is an iterable，相对于像 axios returns 这样的普通对象。某些可迭代的数据，例如 Headers 或 URLSearchParams，无法从控制台查看，您必须迭代它并且 console.log 每个元素，例如：

fetch('http://localhost:9876/test/sample-download', {
    method: 'post',
    headers: {},
    body: {}
})
.then(response => {
  // Inspect the headers in the response
  response.headers.forEach(console.log);
  // OR you can do this
  for(let entry of response.headers.entries()) {
    console.log(entry);
  }
})
.catch(err => console.error(err));

Answer 2

要获得特定的 header 属性，您可以使用以下内容：

response.headers.get(yourProperty)

Answer 3

Headers 仅限于 CORS 请求。参见 https://whosebug.com/a/44816592/2047472

（使用 access-control-expose-headers 允许将 headers 暴露给来自不同来源的请求。）

Answer 4

虽然正确答案是@AndyTheEntity 对我来说有点不完整。

CORS 请求有限制，仅显示 header 的一个子集：

Cache-Control
Content-Language
Content-Type
Expires
Last-Modified
Pragma

为了在响应中显示更多 header， 服务器 必须添加一个 header 以允许更多额外的 header s.

例如，在 POST 请求后，如果创建了新资源，您应该 return 201 CREATED 响应并添加 Location header。如果您需要接受 CORS，您还需要添加下一个 headers（在 服务器 响应中）：

Location: $url-of-created-resource
Access-Control-Expose-Headers: Location

有了这个你会在客户端看到 header Location.

如果你需要发送一个特定的header（比如一个SESSION_ID），那么你需要在request[=52]中添加下一个header =]:

Access-Control-Request-Headers: SESSION_ID SESSION_ID: $current_session_id

我希望这个封面都需要使用 CORS 处理 request/response。

Answer 5

另一种选择是使用 Object.fromEntries()，例如 Object.fromEntries(response.headers) 或 Object.fromEntries(response.headers.entries())。此方法将键值对列表转换为对象。

fetch("https://www.google.com").then(response => console.log(Object.fromEntries(response.headers)))
//-> Promise <pending>

// console.log output:
{
    "alt-svc": "h3=\":443\"; ma=2592000,h3-29=\":443\"; ma=2592000,h3-T051=\":443\"; ma=2592000,h3-Q050=\":443\"; ma=2592000,h3-Q046=\":443\"; ma=2592000,h3-Q043=\":443\"; ma=2592000,quic=\":443\"; ma=2592000; v=\"46,43\"",
    "bfcache-opt-in": "unload",
    "cache-control": "private, max-age=0",
    "content-encoding": "br",
    "content-length": "41556",
    "content-security-policy": "upgrade-insecure-requests",
    "content-type": "text/html; charset=UTF-8",
    "date": "Wed, 04 Aug 2021 08:09:30 GMT",
    "expires": "-1",
    "server": "gws",
    "strict-transport-security": "max-age=31536000",
    "x-frame-options": "SAMEORIGIN",
    "x-xss-protection": "0"
}

注意： Internet Explorer 和 Opera 目前不支持此功能 Android，请参阅 browser compatibility on MDN docs。

Fetch 响应中缺少 headers

Missing headers in Fetch response

javascript

fetch-api

axios