React项目中使用Fetch API获取Content-disposition header失败求助

为啥Network面板能看到这个头，但代码里拿不到？
因为跨域场景下，浏览器默认只允许前端读取几个常用的响应头，Content-Disposition不在默认名单里，所以后端必须主动配置允许前端访问这个头。

后端Spring改法 #

单个接口配置 #

如果是单个下载接口，直接在接口里加两行：

// 允许前端读取Content-Disposition头
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");
// 你的原有下载头设置
response.setHeader("Content-Disposition", "attachment; filename=你的文件名.xlsx");

全局CORS配置 #

如果想所有接口都生效，写个全局配置类：

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOriginPatterns("*") // 根据实际域名调整，带cookie的话别直接用*
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true)
                .exposedHeaders("Content-Disposition"); // 关键配置行
    }
}

前端Fetch获取文件名示例 #

后端配置好后，前端就能正常拿到响应头了，示例代码：

fetch('/api/你的下载接口', {
  method: 'GET',
  credentials: 'include' // 需要带登录cookie的话加上这行
})
.then(res => {
  // 现在能获取到Content-Disposition了
  const disposition = res.headers.get('Content-Disposition');
  // 解析文件名，兼容带引号和不带引号的格式
  const filenameMatch = disposition.match(/filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/);
  const filename = filenameMatch ? filenameMatch[1].replace(/['"]/g, '') : '默认文件名.xlsx';

  // 处理文件下载逻辑
  return res.blob();
})
.then(blob => {
  const url = window.URL.createObjectURL(blob);
  const link = document.createElement('a');
  link.href = url;
  link.download = filename;
  document.body.appendChild(link);
  link.click();
  // 清理临时资源
  window.URL.revokeObjectURL(url);
  document.body.removeChild(link);
});

额外注意点 #

如果接口不是跨域请求（前后端同域名），那检查下后端是否拼写错了Content-Disposition，或者响应头的值格式有问题（比如文件名没加引号），但这种情况很少见，优先排查跨域暴露头的配置。

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