Vercel 不显示 GIF

Question

这是我的第一篇文章，如果表述不正确，我提前道歉。

我最近使用 javascript（后端）和 React（前端）在 Vercel 上部署了我的第一个项目。

这是一个简单的应用程序，使用户能够生成具有个性化颜色、文本、字体的动画 GIF 横幅。

虽然它在我的本地环境中运行良好，但我花了几天时间来理解为什么在 Vercel 上无法正确生成动画 GIF 横幅。

这里有一些提示：

1. 当我在 Vercel 上生成后端 javascript 生成的 blob 时，它太小了（网络开发工具中的

   content-length

   约为 600，而在本地时要大得多）
2. 斑点

   content-type

   是

   text/html

   而不是

   image/gif

   （本地情况就是这样）

我确认：

1. 我已启用 CORS

app.use(
  cors({
    origin: "*",
    methods: "GET",
    allowedHeaders: ["Content-Type", "Authorization"],
  })
);

2. 我已将内容类型设置为

   image/gif

res.set("Content-Type", "image/gif");

3. 后端生成GIF后，以blob形式发送

app.get("/generate-banner", async (req, res) => {

  // Default values
  const text = req.query.text || "This is your banner";
  const textColor = req.query.textColor || "FFFFFF";
  const bgColor = req.query.bgColor || "000000";
  const font = req.query.font || "Arial";
  const fontSize = req.query.fontSize || "18";

  // Generates the GIF
  const gifBuffer = createBannerGif(text, textColor, bgColor, font, fontSize);
  (...)

  // Returns the GIF
  return gifBuffer;
};

然后它被我的前端获取

fetch(`https://banderole.vercel.app/generate-banner?text=${text}&textColor=${strippedTextColor}&bgColor=${strippedBgColor}&font=${selectedFont}&fontSize=${selectedFontSize}`)

4. 它在我的本地环境中正常工作

如果您有任何疑问，请告诉我！

Answer 1

您的后端端点可能返回错误（因为它是

text/html

）。您可以在开发人员工具中查看对后端的请求并检查其响应吗？