feat(图片缓存问题): 修复开发环境有的图片没有正常缓存的问题

src/utils/imageCacheManager.js

@@ -17,7 +17,10 @@ class ImageCacheManager {
 
   // 根据资源类型选择缓存
   async getCacheForUrl(url) {
-    if (url.startsWith('https://tkm-likei.oss-ap-southeast-1.aliyuncs.com/h5')) {
+    if (
+      url.startsWith('https://tkm-likei.oss-ap-southeast-1.aliyuncs.com/h5') ||
+      url.startsWith('/oss/h5/')
+    ) {
       return await caches.open(this.imageCacheName)
     } else {
       return await caches.open(this.assetCacheName)
@@ -211,10 +214,8 @@ class ImageCacheManager {
 
       // 允许缓存特定域名下的资源
       const ossBaseUrl = 'https://tkm-likei.oss-ap-southeast-1.aliyuncs.com/h5'
-      // 允许缓存开发环境下的代理路径
-      const devProxyPath = '/oss/h5/'
 
-      if (url.startsWith(ossBaseUrl) || url.startsWith(devProxyPath)) {
+      if (url.startsWith(ossBaseUrl)) {
         return true
       }
 
@@ -238,6 +239,12 @@ class ImageCacheManager {
           const response = await fetch(url, {
             mode: 'cors',
             credentials: 'omit',
+            cache: 'no-store', // 强制不使用 HTTP 缓存
+            headers: {
+              'Cache-Control': 'no-cache, no-store, must-revalidate',
+              Pragma: 'no-cache',
+              Expires: '0',
+            },
           })
           if (response.ok) {
             await cache.put(url, response.clone())
@@ -330,45 +337,36 @@ class ImageCacheManager {
   // 从网络加载图片
   async loadImageFromNetwork(src, resolve, reject) {
     try {
-      // 对于OSS资源，先尝试直接创建Image对象（绕过fetch的CORS问题）
+      // 统一处理所有资源，不再对OSS做特殊处理
-      if (src.startsWith('https://tkm-likei.oss-ap-southeast-1.aliyuncs.com/h5')) {
-        const img = new Image()
-        img.crossOrigin = 'anonymous'
-        img.onload = () => {
-          resolve(img)
-          // 对于OSS资源，仍然尝试缓存（如果支持）
-          if (this.isBuildAsset(src)) {
-            this.cacheImageFromImage(src, img)
-          }
-        }
-        img.onerror = (error) => {
-          console.warn('图片加载失败:', src, error)
-          reject(error)
-        }
-        img.src = src
-        return
-      }
-
-      // 对于其他资源，使用fetch
       const response = await fetch(src, {
         mode: 'cors',
         credentials: 'omit',
+        cache: 'no-store', // 强制不使用 HTTP 缓存
+        headers: {
+          'Cache-Control': 'no-cache, no-store, must-revalidate',
+          Pragma: 'no-cache',
+          Expires: '0',
+        },
       })
 
       if (response.ok) {
         const img = new Image()
         img.onload = async () => {
+          console.log(`[ImageCacheManager] 图片加载成功: ${src}`)
           resolve(img)
-          // 缓存带有 ETag 的响应
+          // 缓存响应
           if (this.isBuildAsset(src)) {
             try {
-              await this.cacheImage(src) // 使用原始的缓存方法
+              await this.cacheImage(src) // 使用标准缓存方法
             } catch (cacheError) {
               console.warn('缓存图片时出错:', cacheError)
             }
           }
         }
-        img.onerror = reject
+        img.onerror = (error) => {
+          console.warn(`[ImageCacheManager] 图片 onload 失败: ${src}`, error)
+          reject(error)
+        }
         img.src = URL.createObjectURL(await response.blob())
       } else {
         reject(new Error(`HTTP ${response.status}`))

vite.config.js

@@ -51,6 +51,15 @@ export default defineConfig({
         changeOrigin: true,
         secure: true,
         rewrite: (path) => path.replace(/^\/oss/, ''),
+        configure: (proxy, options) => {
+          proxy.on('proxyRes', (proxyRes, req, res) => {
+            // 移除缓存相关的响应头，防止浏览器使用HTTP缓存
+            delete proxyRes.headers['etag']
+            delete proxyRes.headers['last-modified']
+            delete proxyRes.headers['cache-control']
+            delete proxyRes.headers['expires']
+          })
+        },
       },
       // '/api': {
       //   target: 'http://localhost:3000',