使用JavaScript访问缓存响应标头

Question

我正在尝试从我的一个缓存元素中访问响应标头“ date”。

您可以在图片中看到，我的请求没有返回正确的时间戳。相反，它返回null，但我不知道为什么。

这是我使用的代码：

var cachedFile = "https://www.washingtonpost.com/resizer/rgjyoeu2BaoUyNiojHCKLjN9udM=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/EXKAUXTXXUI6TJ57ZCSDXBHOGE.jpg";
caches.open("dynamic-content").then(cache => {
  cache.match(cachedFile).then(response => {
    if(! response){
        console.log("not found");
    }else{
        var element = response.headers.get('date');
        console.log(element);
    }
  })
})

我的目标是删除旧的缓存文件。无需使用工作箱或任何插件。如果有人知道一种方法，我很高兴被开悟;）

Answer 1

尝试（您的请求返回空标题）

let cache={};

var url = "https://cors-anywhere.herokuapp.com/https://www.washingtonpost.com/resizer/rgjyoeu2BaoUyNiojHCKLjN9udM=/1484x0/arc-anglerfish-washpost-prod-washpost.s3.amazonaws.com/public/EXKAUXTXXUI6TJ57ZCSDXBHOGE.jpg";

async function load(url) {
  let c = cache[url];
  if(c) {
    console.log('Cached headers',c.res.headers);
  } else {
    let res = await fetch(url);
    c = cache[url] = {
      res,
      pic: await res.blob(),
    }
  }
  image.src=""; 
  image.src = URL.createObjectURL(c.pic);
}

function start() {
  load(url);
  btn.innerText="Load from cache";
  
}

<button id="btn" onclick="start()">Load</button><br>
<img id="image" height="150"/>