Domexception：在添加或检索过程中，操作是不安全的

Question

我想将缓存添加到我的网站。我正在使用以下两个函数添加和获取缓存。它在开发过程中运行良好，但是当我使用Docker构建应用程序时，缓存就无法正常工作。它给我带来了以下错误。（未求（在承诺）domexception：操作是不安全的。）

显示图像错误

这是我的代码。

export const addDataIntoCache = (cacheName, url, response) => {
  // Converting our response into Actual Response form
  const data = new Response(JSON.stringify(response));

  if ('caches' in window) {
    // Opening given cache and putting our data into it
    caches.open(cacheName).then((cache) => {
      cache.put(url, data);
      console.log('Data Added into cache!')
    });
  } else {
    console.log("does not able to find caches in window");
    caches.open(cacheName).then((cache) => {
      cache.put(url, data);
      console.log('Data Added into cache!')
    });
  }
};

export const getSingleCacheData = async (cacheName, url) => {
  if (typeof caches === 'undefined') {
    console.log("cache is undefined");
    return null;
  }

  const cacheStorage = await caches.open(cacheName);
  const cachedResponse = await cacheStorage.match(url);

  // If no cache exists
  if (!cachedResponse || !cachedResponse.ok) {
    console.log('Fetched failed!');
    return null;
  }

  return cachedResponse.json().then((item) => {
    console.log("fetched from cache");
    console.log(item);
    return item;

  });
};