DOMException: The operation is insecure during cache adding or retriving

Question

I want to add cache to my site. I am using the following two functions to add and get the cache. It is working fine during development but when I use docker to build the app, then the caching is not working. It is giving me the following error.(Uncaught (in promise) DOMException: The operation is insecure.)

Image showing the error

Here is my code.

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;

  });
};