时间戳

首页 > 解决方案 > cachedResponse 没有标头

javascript - 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,
      });
    });
  },
};

标签： javascriptcachingservice-workerworkbox

解决方案

回答你的问题有两点：

在控制台中记录标头

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

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

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

阅读标题

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

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

在此博客文章中，有更多关于此的详细信息，以及在提供跨域响应时使用Access-Control-Expose-Headers响应标头的指南。

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

推荐阅读