Express中res.download前后重定向失败的问题求助

问题原因 #

HTTP协议规定一个请求只能对应一个响应，res.download会向客户端发送文件下载的响应头（如Content-Disposition）和文件内容，此时响应流程已完成。之后再调用res.redirect或手动设置Location头，会触发"Cannot set headers after they are sent to the client"错误——因为响应的状态码和头信息已发送，无法再修改。

可行解决方案 #

后端无法在同一个请求中同时返回下载和重定向，核心思路是让前端处理下载后的跳转逻辑，或拆分请求为"生成文件"和"下载文件"两步。

方案1：前端触发下载后自动跳转

修改前端下载请求逻辑，先获取文件并触发下载，延迟几秒后跳转页面。

前端代码示例：

// 假设页面有id为downloadForm的表单
document.getElementById('downloadForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  try {
    const response = await fetch('/download', {
      method: 'POST',
      body: formData
    });

    if (!response.ok) throw new Error('下载请求失败');

    // 解析下载文件名
    const disposition = response.headers.get('Content-Disposition');
    const filename = disposition.split('filename=')[1].replace(/"/g, '');
    
    // 创建临时链接触发下载
    const blob = await response.blob();
    const url = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    URL.revokeObjectURL(url);

    // 延迟1秒跳转（给浏览器足够时间处理下载）
    setTimeout(() => {
      window.location.href = '/';
    }, 1000);
  } catch (err) {
    alert('下载失败，请重试');
    console.error(err);
  }
});

后端代码调整：
去掉原代码中错误的res.set配置，res.download会自动设置正确响应头：

ffmpegProcess.stdio[6].on('close', () => {
  console.log(titulo);
  // 直接发送下载文件，无需额外设置头
  res.download(`${token}${formato}`, `download.com.br_${titulo}${formato}`, (err) => {
    if (err) {
      console.log(err);
    }
    delete inUseTokens[token];
    fs.unlink(`${token}${formato}`, (err) => {
      if (err) console.log(err);
      console.log('arquivo deletado');
    });
  });
});

方案2：后端返回下载链接，前端分步骤处理

将下载流程拆分为两步：

1. 前端发送POST请求触发文件生成
2. 后端返回临时下载URL，前端先打开下载链接，再跳转

后端代码调整：
新增GET路由用于文件下载，修改原POST路由返回下载链接：

// 新增GET路由：下载生成好的文件
router.get('/download/:token/:formato', (req, res) => {
  const { token, formato } = req.params;
  
  if (!inUseTokens[token]) {
    return res.status(401).send('Unauthorized');
  }

  const filePath = `${token}${formato}`;
  res.download(filePath, (err) => {
    if (err) console.log(err);
    // 下载完成后清理资源
    delete inUseTokens[token];
    fs.unlink(filePath, (err) => {
      if (err) console.log(err);
    });
  });
});

// 修改原POST /download路由：返回下载链接和跳转目标
router.post('/download', (req, res) => {
  // ... 原有的ffmpeg处理逻辑保持不变 ...
  
  ffmpegProcess.stdio[6].on('close', () => {
    res.json({
      downloadUrl: `/download/${token}/${formato}`,
      redirectUrl: '/'
    });
  });
});

前端代码示例：

document.getElementById('downloadForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  try {
    const response = await fetch('/download', {
      method: 'POST',
      body: formData
    });
    const data = await response.json();

    // 打开下载链接
    window.open(data.downloadUrl, '_blank');
    // 立即跳转首页
    window.location.href = data.redirectUrl;
  } catch (err) {
    alert('文件生成失败，请重试');
    console.error(err);
  }
});

方案3：用隐藏iframe加载下载，页面直接跳转

创建隐藏iframe加载下载链接，浏览器后台处理下载，页面直接跳转。

前端代码示例：

document.getElementById('downloadForm').addEventListener('submit', async (e) => {
  e.preventDefault();
  const formData = new FormData(e.target);
  
  // 先请求生成文件，获取下载链接
  const response = await fetch('/download', {
    method: 'POST',
    body: formData
  });
  const data = await response.json();

  // 创建隐藏iframe加载下载链接
  const iframe = document.createElement('iframe');
  iframe.style.display = 'none';
  iframe.src = data.downloadUrl;
  document.body.appendChild(iframe);

  // 立即跳转首页
  window.location.href = data.redirectUrl;
});

注意事项 #

• 临时文件清理：确保下载完成（或失败）后删除服务器上的临时文件，避免磁盘空间占用。
• 跳转延迟调整：根据文件大小适当调整延迟时间，确保浏览器有足够时间触发下载。
• 错误处理：添加完整的错误捕获逻辑，避免用户无感知的操作失败。

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