浏览器缓存 API 不适用于 cookie 身份验证服务

Question

我正在尝试浏览器缓存API机制，但是要缓存的api使用的是cookie认证。并收到 'unauthorized-401' 错误消息。我怀疑当我从 cache.add(apiurl)

调用时，应该为所有 api 请求发送的 http cookie 没有发送

         if ('caches' in window) {
                caches.open('cachename').then(cache => {
                    cache.add(apiUrl).then(() => {
                        //done!
                    })
                });
            }

Answer 1

我找到了处理这个问题的方法。不是在 add() 方法中添加 URL，而是使用 "credentials: include " 或 "credentials: same-orgin" 创建一个 Request 对象，具体取决于您的 CORS 设置。

 if ('caches' in window) {
            caches.open('cachename').then(cache => {
                cache.add(new Request('apiurl', {credentials: 'include'}).then(() => {
                    //done!
                })
            });
        }

//或者

if ('caches' in window) {
            caches.open('cachename').then(cache => {
                cache.add(new Request('apiurl', {credentials: 'same-origin'}).then(() => {
                    //done!
                })
            });
        }

Answer 2

不建议将cache.add与new Request一起使用。至少是对服务器的新请求，可以缓存不相关的数据。相反，我建议使用 cache.put + res.clone()

if ('caches' in window) {
  if (navigator.onLine) {
    return fetch(request)
        .then(res => {
            const resClone = res.clone();
            caches.open(KEY).then((cache) => cache.put(request, resClone));

            return res;
        })
        .catch(err => console.error(err));
  }

  // some other logic
}

https://developer.mozilla.org/en-US/docs/Web/API/Service_Worker_API/Using_Service_Workers#recovering_failed_requests