为何window.fetch()会在Win10 Chrome111中触发文件下载？如何规避？

可能的原因 #

• 服务端响应头配置问题：最常见的是服务端返回了Content-Disposition: attachment; filename="xxx"头，这个头的作用就是告诉浏览器“把这个响应当作附件下载”。哪怕是用fetch发起的请求，Chrome 111这类旧版本可能会忽略fetch的编程式处理逻辑，直接触发下载。另外如果服务端把MIME类型设为application/octet-stream（通用二进制流），浏览器无法直接解析时，也可能默认触发下载。
• Chrome 111的特定bug：这个版本属于较旧的稳定版，可能存在fetch请求处理的兼容性bug，导致某些响应头组合下被误判为需要下载的资源。
• 测试设备的浏览器配置/扩展干扰：测试设备的Chrome可能开启了“自动下载特定类型文件”的设置，或者安装了下载管理器类的扩展，这些扩展会拦截fetch请求并强制触发下载。

解决办法 #

服务端配置调整

• 修改Content-Disposition头：如果不需要让用户下载资源，把这个头设为inline（让浏览器直接解析显示），或者直接移除这个头，让浏览器根据MIME类型自行处理。
• 修正MIME类型：根据返回的资源类型设置正确的MIME类型，比如返回JSON就设Content-Type: application/json，返回文本设text/plain，避免使用application/octet-stream这类通用类型（除非确实是需要下载的二进制文件）。

客户端处理

• 显式处理fetch响应：在fetch的回调中明确调用响应解析方法（比如response.json()、response.text()、response.blob()），告诉浏览器你要编程式处理这个响应，而不是让它默认处理。示例代码：

fetch(url, { method: 'GET' })
  .then(res => {
    if (!res.ok) throw new Error('请求失败');
    return res.json(); // 根据实际资源类型选择对应方法
  })
  .then(data => {
    // 这里处理拿到的数据
  })
  .catch(err => console.error('请求出错:', err));

• 排查浏览器环境：在测试设备上关闭所有Chrome扩展，恢复浏览器默认设置，再测试一次，确认是不是扩展或自定义设置导致的。另外建议把Chrome升级到最新稳定版，旧版本的bug大概率已经被修复。

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