如何在React应用中实现可用的GridFS文件下载链接？

问题概述 #

服务端基于GridFS实现的文件下载API在Postman中可正常运行，但在React组件中点击<a>标签下载时，会出现文件名异常且很快提示“download failed - no file”的错误，确认下载链接本身是正确的。

可能原因 #

• 相对路径错误：React组件中使用的相对路径api/assets/${rawFilenames[i]}可能与应用部署路径不匹配，导致请求URL错误。
• 响应头缺失：服务端返回文件时未设置正确的Content-Disposition和Content-Type头，浏览器无法识别文件名和文件类型，导致下载失败。
• download属性限制：当资源跨域或响应头不允许时，<a>标签的download属性配合target="_blank"可能无法正常工作。

解决办法 #

1. 修正请求路径为绝对路径 #

将相对路径替换为包含服务端域名的绝对路径，避免路径解析错误：

// 示例：使用环境变量配置服务端地址
href={`${process.env.REACT_APP_API_URL}/api/assets/${rawFilenames[i]}`}

在项目根目录的.env文件中配置REACT_APP_API_URL，例如：

REACT_APP_API_URL=http://localhost:5000

2. 服务端添加正确的响应头 #

确保服务端返回文件时设置Content-Disposition和Content-Type头，以Node.js/Express为例：

// 假设file为GridFS获取到的文件对象
res.setHeader('Content-Disposition', `attachment; filename="${encodeURIComponent(file.filename)}"`);
res.setHeader('Content-Type', file.contentType); // 如image/jpeg、application/pdf等
res.send(file.data);

3. 通过Blob方式实现下载 #

如果上述方法无效，可以通过前端请求Blob数据，手动创建下载链接：
修改React组件代码：

import React, { useEffect } from "react";
import { getMyFilenames, downloadFile } from "../features/assets/AssetsSlice";
import { useDispatch } from "react-redux";
import { useSelector } from "react-redux";

const AssetsList = () => {
  const dispatch = useDispatch();
  const { filenames, rawFilenames } = useSelector((state) => state.assets);

  useEffect(() => {
    dispatch(getMyFilenames());
  }, [dispatch]);

  const handleDownload = async (rawFilename, displayName) => {
    try {
      const result = await dispatch(downloadFile(rawFilename)).unwrap();
      const blob = new Blob([result.data], { type: result.headers.get('content-type') });
      const downloadUrl = window.URL.createObjectURL(blob);
      
      const link = document.createElement('a');
      link.href = downloadUrl;
      link.download = displayName;
      document.body.appendChild(link);
      link.click();
      
      // 清理资源
      window.URL.revokeObjectURL(downloadUrl);
      document.body.removeChild(link);
    } catch (err) {
      console.error('下载出错:', err);
    }
  };

  return (
    <>
      {filenames?.map((name, idx) => (
        <p key={idx}>
          <button onClick={() => handleDownload(rawFilenames[idx], name)}>
            {name}
          </button>
        </p>
      ))}
    </>
  );
};

export default AssetsList;

同时更新AssetsSlice中的downloadFile异步action：

import { createAsyncThunk } from '@reduxjs/toolkit';

export const downloadFile = createAsyncThunk(
  'assets/downloadFile',
  async (rawFilename, { rejectWithValue }) => {
    try {
      const res = await fetch(`/api/assets/${rawFilename}`);
      if (!res.ok) throw new Error('请求失败');
      
      return {
        data: await res.blob(),
        headers: res.headers
      };
    } catch (err) {
      return rejectWithValue(err.message);
    }
  }
);

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