Vue.js部署Azure静态Web应用时axios无法获取content-disposition头部问题

根因分析 #

这是CORS响应头暴露规则限制导致的问题：

• 跨域请求场景下，浏览器默认仅允许前端JavaScript访问7种标准安全响应头，content-disposition不在默认允许访问的列表范围内
• 浏览器开发者工具的网络面板可以看到完整响应头，和JS是否有权限读取响应头是两个独立逻辑，因此会出现你看到头存在但代码读取为undefined的情况
• 本地环境功能正常是因为本地开发通常使用Vue内置代理转发请求，不存在跨域限制，不会触发CORS的响应头访问约束

修复方案 #

你需要在提供下载接口的后端服务中，新增Access-Control-Expose-Headers响应头配置，将content-disposition加入允许前端访问的头列表：

通用后端配置示例 #

以Node.js/Express后端为例：

// 单个头暴露配置
res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition')
// 存在多个需要暴露的头时用逗号分隔即可
// res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition, X-Custom-Token')

Azure托管服务配置 #

如果后端部署在Azure相关服务中，可对应调整：

• 若使用Azure Functions作为后端，可直接在接口返回响应时添加上述头，也可在Azure门户的函数CORS配置页的「公开的标头」栏新增Content-Disposition
• 若使用Azure API Management转发接口，可在对应API的出站策略中添加Access-Control-Expose-Headers配置

代码优化建议 #

建议新增判空兜底逻辑，避免响应头异常时直接抛出运行时错误：

const headerLine = response.headers["content-disposition"];
// 预设兜底文件名
let filename = '下载文件';
if (headerLine) {
  const startFileNameIndex = headerLine.indexOf('"') + 1;
  const endFileNameIndex = headerLine.lastIndexOf('"');
  filename = headerLine.substring(startFileNameIndex, endFileNameIndex);
}

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