cachedResponse 没有 headers

Question

我正在尝试使用响应的日期 header 来确定缓存响应的年龄。我用一个使用 cachedResponseWillBeUsed 的插件做到了这一点。但是，访问 cachedResponse.headers 什么也没给我。这是故意的吗？附上代码：

const cachedResponsePlugin = {
  cachedResponseWillBeUsed: ({ cachedResponse }) => {
    let headers = new Headers(cachedResponse.headers);
    console.log(cachedResponse.headers); // Empty
    headers.set("X-Cached-Response", "true");

    return cachedResponse.arrayBuffer().then((buffer) => {
      return new Response(buffer, {
        status: cachedResponse.status,
        statusText: cachedResponse.statusText,
        headers,
      });
    });
  },
};

Answer 1

回答你的问题有两点：

在控制台中记录 Headers

在大多数浏览器中，

console.log(cachedResponse.headers) 通常不会记录任何有用的信息。（在 Chrome 中，它只记录 Headers {}。）

Headers object is iterable，但 console.log() 不会自动为您迭代其值。相反，您需要显式迭代作为日志记录的一部分。我发现，最简单的方法是使用 ... 进行迭代，然后将结果包装在 [] 中以将值收集到数组中。

将它们放在一起，console.log([...cachedResponse.headers]) 应该会显示您正在寻找的值。

正在阅读 headers

一般来说，响应 header 在写入缓存存储 API 时会被保留。

对于 cross-origin 响应，当您从缓存中读取该响应时，只有 header 的一个子集可用。（Workbox 在生成 cachedResponse 参数时会自动为您从缓存中读取。）

有更多关于此的详细信息，以及使用 Access-Control-Expose-Headers response header when serving your cross-origin responses, in this blog post 的指南。

如果您正在处理 same-origin 响应，则不必设置 header，但您可能只是错过了 header 可用的事实由于上述日志记录问题。

cachedResponse 没有 headers

cachedResponse has no headers

javascript

caching

service-worker

workbox

在控制台中记录 Headers

正在阅读 headers