iOS Chrome点击文件下载链接直接打开不触发下载的解决方法

现有一个用于返回文件的后端接口（以docx格式为例，jpg、png等任意可被浏览器识别的文件格式都会复现相同问题），接口基于ASP.NET Core实现，控制器代码如下：

[ApiController]
[Route("[controller]")]
public class FileController : Controller
{
    [HttpGet("")]
    public IActionResult Index()
    {
        var fileName = "File.docx";
        var filePath = @$"C:\Sources\{fileName}";

        FileStream stream = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.None);

        return File(stream, "application/octet-stream", fileName);
    }
}

各端访问该接口的测试表现如下：

• iOS端Safari浏览器：正常弹出文件下载对话框
• iOS端Chrome浏览器：不触发下载，直接在当前网页中加载展示文件内容
• 安卓平板端Chrome浏览器：正常触发文件下载

实际业务场景中，指向该接口的下载链接放置在业务网页内，用户点击链接时，iOS Chrome会直接替换当前页面加载文件内容，不会执行下载操作。
补充测试结论：如果接口返回iOS Chrome无法识别的未知二进制文件，浏览器可以正常触发下载。

iOS Chrome出现该问题的核心原因是：浏览器会主动嗅探响应内容的真实格式，忽略服务端返回的application/octet-stream声明，只要识别出是自身支持预览的格式（文档、图片等），就会默认按inline模式直接打开页面展示内容，不会触发下载。可通过以下方案修复：

1. 后端强制配置响应头，禁止浏览器内容嗅探，显式声明要求下载
   不要完全依赖框架File方法重载自动生成的响应头，手动添加两个关键响应头即可：

   [HttpGet("")]
   public IActionResult Index()
   {
       var fileName = "File.docx";
       var filePath = @$"C:\Sources\{fileName}";
       FileStream stream = new FileStream(filePath, FileMode.Open, FileAccess.Read, FileShare.None);
       // 显式声明附件下载，同时兼容多浏览器的文件名编码规则
       Response.Headers.Add("Content-Disposition", $"attachment; filename=\"{fileName}\"; filename*=UTF-8''{Uri.EscapeDataString(fileName)}");
       // 禁止浏览器私自嗅探内容类型，严格按照服务端返回的Content-Type处理
       Response.Headers.Add("X-Content-Type-Options", "nosniff");
       return File(stream, "application/octet-stream");
   }
   

2. 前端改造下载逻辑，绕开浏览器直接导航到文件地址的默认行为
   如果后端调整后仍有兼容问题，可以在前端把普通a链接跳转的逻辑，改成通过fetch拉取文件转blob后触发本地下载，该方案对iOS全版本Chrome的兼容性最好：

   // 下载按钮点击事件处理逻辑
   async function triggerDownload(downloadUrl, saveFileName) {
     const response = await fetch(downloadUrl);
     const fileBlob = await response.blob();
     const tempBlobUrl = window.URL.createObjectURL(fileBlob);
     const downloadAnchor = document.createElement('a');
     downloadAnchor.href = tempBlobUrl;
     downloadAnchor.download = saveFileName;
     document.body.appendChild(downloadAnchor);
     downloadAnchor.click();
     document.body.removeChild(downloadAnchor);
     window.URL.revokeObjectURL(tempBlobUrl);
   }
   

注意：不要在响应头中把Content-Disposition设置为inline，该值会明确告知浏览器可直接预览内容，会进一步提升iOS Chrome直接打开文件的概率。

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