Cache redirect chain result using VitaPWA

Question

i have a Vue app that uses Vite. I made it into a PWA using vite-plugin-pwa, it works great but now I'm trying to cache some images so I don't have to load them every time.

the images are loaded after the following redirect chain: https://my-api.com/api/images/image001.jpg --> https://my-cdn.com/api/files/image001.com --> https://cdn-location.my-cdn.com/files/image001.jpg

I would like to use vite-plugin-pwa to cache the result of the last URL under the location of the first one. so that I don't have to follow the redirect chain everytime.

note: that the second and third URLs are dynamic and cannot be cached.

currently the config of vite-plugin-pwa is the following:

        VitePWA({
            registerType: "script",
            workbox: {
                runtimeCaching: [
                    {
                        urlPattern: /https:\/\/my-site\.com\/api\/file\/thumbnails\/.*\.jpg/,
                        handler: "CacheFirst",
                        options: {
                          cacheName: 'images',
                          expiration: {
                            maxEntries: 500,
                            maxAgeSeconds: 60 * 60 * 24 * 30
                          },
                          cacheableResponse: {
                            statuses: [200]
                          }
                        }
                      }
                ]
            },
            manifest: {
                name: 'MyApp',
                short_name: 'MyApp',
                description: 'My Awesome App description',
                theme_color: '#ffffff',
                display: 'fullscreen',
                icons: [
                  {
                    src: 'icon.png',
                    sizes: '250x250',
                    type: 'image/png'
                  }
                ]
              }
        }),