Cloudflare部署Next.js接口响应头未正确设置image/png问题排查

• Cloudflare自动MIME检测覆盖响应头
  Cloudflare默认会自动识别响应内容的MIME类型，可能忽略你在代码中设置的Content-Type。解决办法：

  1. 登录Cloudflare控制台，进入「规则」→「转换规则」→「修改响应头」
  2. 添加规则匹配路径/api/download*，设置「保留」或「强制设置」Content-Type为image/png
  3. 或在「页面规则」中为该路径禁用「自动MIME类型检测」

• Edge Runtime下响应头处理差异
  如果你的API路由启用了Edge Runtime（比如配置了export const runtime = 'edge'），Cloudflare Edge环境对响应头的处理可能存在差异。可以尝试改用Headers对象来设置响应头：

const headers = new Headers();
headers.set('Content-Type', 'image/png');
headers.set('Content-Disposition', `attachment; filename="${fileName}.png"`);
return new Response(image, { headers });

• R2返回非二进制数据
  如果downloadFileFromR2返回的是字符串而非二进制格式，Cloudflare会将其识别为文本类型。确保该函数返回Uint8Array或Buffer：

// 修正downloadFileFromR2示例实现
async function downloadFileFromR2(fileName) {
  const object = await BUCKET.get(fileName);
  if (!object) throw new Error('File not found');
  const arrayBuffer = await object.arrayBuffer();
  return new Uint8Array(arrayBuffer);
}

• Cloudflare缓存残留
  如果该API路径被Cloudflare缓存，旧的响应头可能被保留。解决办法：

  1. 在Cloudflare控制台「缓存」→「缓存规则」中，为/api/download*设置「绕过缓存」
  2. 手动清除该路径的缓存

• Content-Disposition语法错误
  代码中使用了HTML实体转义"，HTTP头中应直接使用双引号，修正为：

'Content-Disposition': `attachment; filename="${fileName}.png"`

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