使用 JavaScript 访问缓存响应 headers

Question

我正在尝试从我的缓存元素之一访问响应 header "date"。

如图所示，我的请求没有 return 正确的时间戳。相反，它 return 为空，我不知道为什么。

这是我使用的代码：

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

试试（你的要求return空headers）

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"/>

使用 JavaScript 访问缓存响应 headers

Access cache response headers with JavaScript

javascript

caching

response-headers