Express.js动态图片输出超时问题求助

1. 给Fetch请求添加超时控制 #

上游服务器响应缓慢时，默认Fetch无超时限制，会导致后端长期挂起触发超时。用Promise.race实现超时拦截：

const fetchWithTimeout = (url, options = {}, timeout = 10000) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) => 
      setTimeout(() => reject(new Error('Fetch请求超时')), timeout)
    )
  ]);
};

try {
  const response = await fetchWithTimeout(`http://example.com?write=Hi+Pls+Help`);
  if (!response.ok) {
    throw new Error(`上游服务器返回错误：${response.status}`);
  }
  // 转发上游的Content-Type，避免硬编码导致类型不匹配
  const headers = { 
    "Content-Type": response.headers.get('Content-Type') || 'image/png' 
  };
  res.writeHead(200, headers);
  // 监听流错误，避免进程崩溃
  response.body.pipe(res).on('error', (err) => {
    console.error('图片传输错误:', err);
    if (!res.headersSent) {
      res.writeHead(500, { "Content-Type": 'text/plain' });
      res.end('图片传输失败');
    }
  });
} catch (err) {
  // 统一处理超时或上游错误
  res.writeHead(504, { "Content-Type": 'text/plain' });
  res.end('请求超时或上游服务器异常');
}

2. 配置后端服务器全局超时 #

如果使用Express等框架，设置全局响应超时，避免请求长期挂起：

const express = require('express');
const app = express();

// 设置15秒响应超时
app.use((req, res, next) => {
  res.setTimeout(15000, () => {
    res.status(504).send('服务器响应超时');
  });
  next();
});

3. 可选：添加缓存策略（非实时动态图片适用） #

若图片无需每次请求重新生成，添加缓存头减少重复请求压力：

const headers = {
  "Content-Type": response.headers.get('Content-Type') || 'image/png',
  "Cache-Control": "public, max-age=3600" // 缓存1小时
};
res.writeHead(200, headers);

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