Netlify边缘函数设置缓存标签后无法按标签清除缓存求助

核心问题原因 #

你当前用_redirects的200重写规则代理请求，再通过边缘函数添加Cache-Tag的方式，会导致Netlify CDN缓存的是上游CMS返回的原始响应，而边缘函数添加的Cache-Tag只是在返回给浏览器时追加的头信息，并没有被CDN关联到缓存条目上。这就是为什么按标签清除无效——CDN的缓存元数据里根本没有这些标签。

修复步骤 #

1. 移除_redirects中的代理规则 #

删掉/files/* https://my_cms/files/:splat 200这条规则，把代理逻辑移到边缘函数中，确保CDN缓存的是经过边缘函数处理、带有Cache-Tag的响应。

2. 修改边缘函数代码 #

直接在边缘函数中请求上游CMS，再添加缓存相关头信息：

export default async (req: Request, context: Context) => {
  // 提取请求路径中的资源部分，拼接上游CMS的URL
  const url = new URL(req.url);
  const splat = url.pathname.replace('/files/', '');
  const upstreamUrl = `https://my_cms/files/${splat}`;

  // 请求上游资源，保留原始请求的方法和头信息
  const upstreamResponse = await fetch(upstreamUrl, {
    method: req.method,
    headers: req.headers
  });

  // 生成缓存标签
  const cacheTags = getCacheTagsForPath(req.url);

  // 复制上游响应的头信息，避免丢失Content-Type等关键字段
  const headers = new Headers(upstreamResponse.headers);
  
  // 添加缓存相关配置头
  headers.set('Cache-Tag', cacheTags.join(','));
  headers.set('Netlify-Cdn-Cache-Control', 'public, s-maxage=31536000, must-revalidate');
  headers.set('Cache-Control', 'public, max-age=0, must-revalidate');

  // 返回处理后的响应
  return new Response(upstreamResponse.body, {
    status: upstreamResponse.status,
    headers: headers
  });
};

export const config: Config = {
  path: "/files/*"
};

3. 验证缓存标签关联 #

部署修改后的边缘函数后，重新请求图片资源，完成以下检查：

• 确认浏览器响应头中依然存在Cache-Tag字段
• 调用Netlify缓存清除API并指定对应标签，此时应该能正确清除该标签关联的所有缓存资源

额外检查点 #

• 确保getCacheTagsForPath返回的标签仅包含字母、数字、连字符、下划线或逗号，Netlify的Cache-Tag不支持特殊字符
• 检查缓存清除API的请求参数：确保tag值和响应头中的Cache-Tag完全一致（大小写敏感）

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