Vercel无服务器函数后端获取blob类型gif转发前端失效如何解决？

你存在两处核心配置遗漏，修复后即可正常返回可加载的GIF资源：

1. Axios未指定二进制响应类型 #

Axios默认将响应数据解析为UTF-8字符串，二进制的GIF资源会在字符串转码过程中被不可逆损坏。你需要在Axios请求参数中添加responseType: 'arraybuffer'配置，让Axios直接返回原始二进制数据。

2. MIME类型配置错误 #

GIF格式的标准MIME类型为image/gif，你填写的media/gif属于无效类型，会导致客户端无法正确识别资源格式，进而无法正常渲染。

修复后的完整代码 #

export default async (_: NowRequest, response: NowResponse) => {
  const res = await Axios.get(
    "{BLOB_URL}",
    // 新增二进制响应类型配置
    { responseType: 'arraybuffer' }
  );
  // 修正Content-Type为正确的GIF MIME类型
  response.setHeader("Content-Type", "image/gif");
  // 可选配置：添加缓存头，符合你的缓存需求，减少重复回源
  response.setHeader("Cache-Control", "public, max-age=86400");

  return response.status(200).send(res.data);
};

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