CRA创建的React应用中a标签download下载API文件失效求助

问题核心原因 #

直接点击带download属性的a标签返回302，右键另存为正常，本质是：

• 浏览器的download属性要求目标资源为同源资源，或跨域资源返回正确的CORS配置；当API返回302重定向到其他地址时，若重定向后的资源不满足同源/跨域规则，download会失效，浏览器会直接跳转而非触发下载。
• 若API未返回Content-Disposition: attachment响应头，浏览器会优先尝试预览文件，而非触发下载行为。

解决方案 #

1. 后端API配置调整（优先推荐）

确保API端点返回的响应包含以下关键头信息：

• Content-Disposition: attachment; filename="file.pdf"：强制浏览器触发下载，而非跳转或预览。
• 如果API是重定向到第三方存储（如OSS、S3），需确保重定向后的资源也返回上述Content-Disposition头；若跨域，还需补充配置：
  • Access-Control-Allow-Origin: 你的前端域名
  • Access-Control-Expose-Headers: Content-Disposition（允许前端读取该头信息）

2. 前端通过Fetch获取Blob后再下载

如果后端无法修改配置，前端可以先请求文件转为Blob，再创建下载链接绕过重定向限制：

// 示例代码
fetch('/api/downloads/file.pdf', {
  method: 'GET',
  credentials: 'include' // 若API需要登录态，携带cookie
})
.then(response => {
  if (!response.ok) throw new Error('请求失败');
  // 从响应头提取文件名（可选）
  const disposition = response.headers.get('Content-Disposition');
  const filenameMatch = disposition?.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
  const filename = filenameMatch ? filenameMatch[1].replace(/['"]/g, '') : 'file.pdf';
  
  return response.blob().then(blob => ({ blob, filename }));
})
.then(({ blob, filename }) => {
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  // 清理资源
  document.body.removeChild(link);
  window.URL.revokeObjectURL(url);
})
.catch(err => console.error('下载失败:', err));

3. 检查CRA代理配置

如果你的/api是通过CRA的proxy配置转发到后端，需确保代理未过滤关键响应头：

• 在项目根目录创建src/setupProxy.js（需先安装依赖：npm i http-proxy-middleware --save-dev）
• 配置示例：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://你的后端API地址',
      changeOrigin: true,
      onProxyRes: (proxyRes, req, res) => {
        // 保留Content-Disposition头
        if (proxyRes.headers['content-disposition']) {
          res.setHeader('Content-Disposition', proxyRes.headers['content-disposition']);
        }
      }
    })
  );
};

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