Supabase图片cache max-age设置未被Chrome生效问题求助

核心原因 #

Supabase存储的缓存策略是文件上传时绑定元数据，旧文件不会自动同步后续修改的存储桶默认缓存设置。你看到的3600秒是旧文件上传时的缓存配置，新文件上传时用了你后来设置的6个月规则，所以表现正常。

针对性解决方法 #

• 手动更新单个旧文件缓存头：
  进入Supabase存储控制台，找到目标旧图片，点击「更多」→「编辑元数据」，手动添加/修改Cache-Control字段为max-age=15552000, public，保存后强制刷新浏览器（Ctrl+F5）查看网络面板，缓存规则会生效。
• 批量更新旧文件（文件量大时）：
  用Supabase Storage API编写脚本批量修改元数据，比如JavaScript示例：

  import { createClient } from '@supabase/supabase-js'
  
  const supabase = createClient('你的Supabase URL', '你的服务端密钥')
  
  async function updateCacheHeaders() {
    const { data: files, error } = await supabase.storage.from('你的存储桶名').list('目标文件夹路径', { recursive: true })
    if (error) throw error
  
    for (const file of files) {
      if (file.name.match(/\.(ico|pdf|flv|jpg|webp|jpeg|png|gif|js|css|swf)$/)) {
        await supabase.storage.from('你的存储桶名').updateMetadata(file.name, {
          cacheControl: 'max-age=15552000, public'
        })
      }
    }
  }
  
  updateCacheHeaders()
  

无效配置说明 #

你添加的.htaccess文件对Supabase提供的图片URL完全无效——这些文件托管在Supabase的CDN上，并非你的服务器，.htaccess仅能控制自身服务器上的静态文件缓存规则，这个配置可以忽略。

额外验证 #

直接使用Supabase的图片URL不会影响缓存生效，只要文件元数据里的Cache-Control正确，CDN就会返回对应的缓存头，浏览器也会遵守该规则。

内容的提问来源于stack exchange，提问作者MIPB