使用Axios获取Content-Disposition报头遇CORS错误，如何解决？

我太懂你碰到这个问题的糟心感了——明明API响应里清清楚楚带着需要的头，结果浏览器偏不让拿，还抛出那个"Refused to get unsafe header"的错误。咱们一步步拆解解决：

问题根源拆解 #

你提到API已经设置了Access-Control-Expose-Headers:*，理论上这个配置应该允许浏览器把所有响应头开放给前端，但实际有两个容易踩的坑：

1. 浏览器通配符兼容性问题：部分浏览器（尤其是旧版本）对Access-Control-Expose-Headers:*的支持不够彻底，或者在无凭证请求场景下，通配符的作用没有被正确触发；
2. Axios头获取方式不对：你当前用的response.request.getResponseHeader()是底层XMLHttpRequest的原生方法，绕开了Axios封装的CORS兼容处理，更容易触发浏览器的安全限制。

具体解决方案 #

1. 优化API的CORS配置（可选但推荐） #

虽然通配符*看起来省事，但建议API端明确指定需要暴露的头，把配置改成：

Access-Control-Expose-Headers: Content-Disposition

这样能确保浏览器明确识别这个头是允许前端访问的，彻底规避通配符带来的兼容性隐患。

2. 修改Axios获取响应头的方式 #

Axios会自动把所有响应头的键名转换成小写，并且封装在response.headers对象里，直接通过小写键名获取即可：

axios.get('Group/GetGroupObjectives', { 
  params: { periodId, isPreliminary }, 
  responseType: 'arraybuffer', 
})
.then((response) => {
  if (response) {
    // 注意这里用小写的键名
    const contentDisposition = response.headers['content-disposition'];
    console.log(contentDisposition);
    // 要是需要解析文件名，可以加这段：
    // const filenameMatch = contentDisposition.match(/filename="(.+)"/);
    // const filename = filenameMatch ? filenameMatch[1] : 'download.xlsx';
  } else {
    dispatch(docDownloadFailed());
  }
})
.catch(error => {
  // 别忘了加错误捕获，方便排查问题
  console.error('请求或获取头失败:', error);
  dispatch(docDownloadFailed());
});

额外验证点 #

• 确认API的Access-Control-Allow-Origin配置正确（你这里是*，如果前端是带凭证的请求，需要改成具体域名）；
• 打开浏览器控制台的Network面板，检查Response Headers里是否确实存在Content-Disposition和正确的Access-Control-Expose-Headers配置。

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