cachedResponse 没有标头 在控制台中记录标题读取标题

如何解决cachedResponse 没有标头 在控制台中记录标题读取标题

我正在尝试使用响应的日期标头确定缓存响应的时间。我用一个使用 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,});
    });
  },};

解决方法

回答你的问题有两点：

在控制台中记录标题

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

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

综合起来，console.log([...cachedResponse.headers]) 应该会显示您正在寻找的值。

读取标题

一般来说，写入缓存存储 API 时会保留响应标头。

对于跨源响应，当您从缓存中读取该响应时，只有一部分标头可用。 （Workbox 在生成 cachedResponse 参数时会自动从缓存中读取。）

在此 Access-Control-Expose-Headers response header 中有更多关于此的详细信息，以及有关在提供跨源响应时使用 blog post 的指南。

如果您正在处理同源响应，则不需要设置该标头，但由于上述日志记录问题，您可能只是错过了标头可用的事实。