点击按钮触发 `application/x-msdownload` 下载时文件名乱码或无法下载

Question

点击按钮触发 `application/x-msdownload` 下载时，常见问题为**中文文件名乱码或下载失败（如 Chrome 报“无法安全下载”、Edge 静默拦截、Safari 拒绝保存）**。根本原因在于：该 MIME 类型已过时且被现代浏览器严格限制；服务端未正确设置 `Content-Disposition` 响应头（缺失 `filename*`（RFC 5987）编码字段），导致 UTF-8 中文名被错误解析为 ISO-8859-1；前端通过 `` 或 `fetch + URL.createObjectURL()` 触发时，若 Blob 名称未显式指定或编码不一致，亦会丢失原始文件名。此外，跨域请求缺失 `Access-Control-Expose-Headers: Content-Disposition` 将导致响应头不可读，进一步引发文件名丢失或空下载。该问题在 Vue/React 动态生成链接、Spring Boot/Node.js 后端未适配多语言文件名场景中尤为高频。

Answer 1

```html

一、现象层：典型错误表现与复现路径

• Chrome 控制台报错：Failed to load resource: net::ERR_BLOCKED_BY_CLIENT 或提示“无法安全下载”；
• Edge 浏览器静默失败，无提示、无下载弹窗、network 面板显示 200 但响应体为空；
• Safari 直接拒绝保存，控制台抛出 Blocked attempt to create a Blob URL for a resource with disallowed MIME type "application/x-msdownload"；
• 下载文件名为 %E4%B8%AD%E6%96%87%E6%96%87%E4%BB%B6.zip（URL 编码未解码）或乱码如 涓%96%87.zip；
• Vue 中使用 <a :href="downloadUrl" download="中文名.zip"> 失效，download 属性被忽略；
• React + fetch + URL.createObjectURL() 生成的 Blob 文件名始终为 download.bin；
• Spring Boot 接口返回 Content-Disposition: attachment; filename="中文.zip"，但前端读不到该头字段；
• Node.js（Express）中设置 res.set('Content-Disposition', 'attachment; filename="中文.zip"') 后仍乱码；
• 跨域请求下，response.headers.get('Content-Disposition') 返回 null；
• 后端日志显示请求成功，但前端无法触发下载动作——实际是浏览器策略拦截而非服务异常。

二、协议层：MIME 类型与 HTTP 头规范深度解析

现代浏览器已将 application/x-msdownload 列入高风险废弃 MIME 类型黑名单（Chrome 自 v95+、Edge v100+、Safari v16.4+）。根据 WHATWG MIME Sniffing Algorithm，该类型触发严格校验逻辑：

规范标准	关键要求	浏览器实现差异
RFC 5987	支持 UTF-8 编码的 filename* 字段（如 filename*=UTF-8''%E4%B8%AD%E6%96%87.zip）	Chrome/Edge 完全支持；Safari 仅支持 Safari 17+（iOS 17/macOS 14）
RFC 6266	Content-Disposition 必须同时提供 filename（ISO-8859-1 兼容）和 filename*（UTF-8 扩展）双字段	Firefox 强依赖双字段；旧版 Edge 对单 filename* 兼容性差

三、架构层：前后端协同失效链路图谱

graph LR
  A[前端点击按钮] --> B{触发方式}
  B -->|a标签href| C[浏览器原生下载策略]
  B -->|fetch + Blob| D[JS 构造下载流]
  C --> E[检查MIME是否在白名单]
  D --> F[读取Response Headers]
  E -->|x-msdownload ❌| G[Chrome/Edge 拦截]
  F -->|缺少Access-Control-Expose-Headers| H[Content-Disposition不可见]
  H --> I[无法提取filename*]
  I --> J[Blob.name = 'download.bin']
  G & J --> K[中文名丢失/下载失败]

四、解决方案层：全栈兼容性修复矩阵

• 服务端强制升级 MIME 类型：弃用 application/x-msdownload，统一使用语义化类型如 application/zip、application/vnd.openxmlformats-officedocument.spreadsheetml.sheet（.xlsx）等；
• Content-Disposition 双编码输出（Spring Boot 示例）：

  String fileName = "报表_2024年Q3.xlsx";
  String encodedName = URLEncoder.encode(fileName, StandardCharsets.UTF_8);
  response.setHeader("Content-Disposition",
      "attachment; " +
      "filename=\"" + fileName.replace("\"", "\\\"") + "\"; " +
      "filename*=UTF-8''" + encodedName);

• 跨域头透传声明（Nginx/Backend 必配）：Access-Control-Expose-Headers: Content-Disposition；
• 前端 Blob 下载增强逻辑（Vue 3 Composition API）：

  const downloadBlob = async (url, defaultName = 'download.bin') => {
    const res = await fetch(url, { method: 'GET' });
    const disposition = res.headers.get('Content-Disposition');
    let fileName = defaultName;
    if (disposition) {
      const utf8Match = disposition.match(/filename\*=(?:UTF-8'')?([^;]+)/i);
      fileName = utf8Match ? decodeURIComponent(utf8Match[1]) : defaultName;
    }
    const blob = await res.blob();
    const blobUrl = URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = blobUrl;
    a.download = fileName;
    document.body.appendChild(a);
    a.click();
    document.body.removeChild(a);
    URL.revokeObjectURL(blobUrl);
  };

```