根本原因是后端未正确设置content-type和content-disposition响应头；前者声明文件类型，后者强制下载行为，缺一不可，且gridfs的filename需手动注入并utf-8编码。
浏览器无法直接下载 GridFS 文件，根本原因不是前端没写对，而是后端没把 Content-Type 和 Content-Disposition 响应头配齐——尤其当文件类型未知或为二进制时，缺一不可。
为什么只设 Content-Type 不够
浏览器根据 Content-Type 决定是内嵌渲染（如 text/html、image/png）还是触发下载。但即使你设了 application/octet-stream，现代浏览器（Chrome/Firefox/Safari）仍可能因 MIME 类型可识别而选择预览（比如 PDF、JSON、CSV）。真正强制下载靠的是 Content-Disposition: attachment; filename="xxx"。
-
Content-Type告诉浏览器“这是什么”，Content-Disposition告诉浏览器“怎么处理它” - GridFS 中的
filename字段不自动映射到响应头，必须手动读取并拼进filename=参数 - 若
filename含中文或特殊字符（空格、括号），需用filename*=UTF-8''...编码格式，否则下载名乱码或截断
Node.js + Express 中正确设置响应头的写法
使用 mongodb 官方驱动和 GridFSBucket 时，不能只靠 res.sendFile()（它不支持 GridFS 流），必须手动 pipe 并设置头：
const { GridFSBucket } = require('mongodb');
const bucket = new GridFSBucket(db);
app.get('/download/:fileId', async (req, res) => {
const fileId = new ObjectId(req.params.fileId);
const file = await bucket.find({ _id: fileId }).toArray().then(files => files[0]);
if (!file) return res.status(404).send('Not found');
// 关键：先设响应头，再开始流
res.set({
'Content-Type': file.contentType || 'application/octet-stream',
'Content-Disposition': `attachment; filename*=UTF-8''${encodeURIComponent(file.filename)}`,
'Content-Length': file.length
});
const downloadStream = bucket.openDownloadStream(fileId);
downloadStream.pipe(res).on('error', () => {
res.status(500).send('Stream error');
});
});
- 务必在
pipe()前调用res.set()，否则头已发送，再设无效 -
file.contentType来自 GridFSfiles集合的contentType字段，上传时应显式设置（如bucket.uploadFromStream(filename, stream, { contentType: 'application/pdf' })） - 不要依赖
file.metadata.contentType—— 它不是标准字段，容易遗漏
前端发起下载时的注意事项
不能用 window.location.href 或 <a href></a> 直链，因为它们无法携带认证 header（如 JWT Bearer）；且 GET 请求无法传复杂参数。推荐用 fetch + Blob：
async function downloadFile(fileId, token) {
const res = await fetch(`/download/${fileId}`, {
headers: { Authorization: `Bearer ${token}` }
});
if (!res.ok) throw new Error(res.statusText);
const blob = await res.blob();
const url = URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = (await res.json()).filename || 'unknown'; // 若后端额外返回 filename，可更准
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
URL.revokeObjectURL(url);
}
- 注意：上面代码假设后端同时返回了 JSON 元数据（需额外接口）；更稳妥做法是让后端在
Content-Disposition中带全 filename，前端无需解析响应体 - 若用
<a download></a>，Safari 会忽略download属性且不发认证 header，必须用 Blob 方案 - 大文件（>100MB）慎用
blob()，内存占用高；此时应改用res.body.pipeTo(...)（Streaming API）或服务端直链（配合短期签名 URL）
最容易被忽略的是：GridFS 文件上传时漏设 contentType，导致后端 fallback 到 application/octet-stream，而浏览器又恰好能识别该二进制内容（比如误把 docx 当 zip 打开），结果点下载却弹出预览页——这时候别调前端，先查数据库里那条 files 文档的 contentType 字段有没有值。
