Axios无法获取已设置的响应头？Network可见但res.headers为空

服务器端部署的Server.cjs代码如下：

var express = require('express');
var cors = require('cors');
var app = express()
app.use(express.urlencoded({ extended: true }))
const port = 3001;
app.use(cors())

app.get("/download", (req, res) =>{
    const file_uniquename = req.query.file_uniquename
    const { file_originalname, mimetype, filepath } = ...

    res.setHeader('Content-disposition', 'attachment; filename=' +  file_originalname)
    res.setHeader('Contect-type', mimetype) // 注意拼写错误：应为Content-type
    const stream = fs.createReadStream(filepath)
    stream.pipe(res)
  }
})


app.listen(port, () => {console.log(`App listening at :${port}`);});

前端使用Axios请求文件时，开发者工具Network标签能看到设置的响应头，但Axios返回的res对象中headers为空。前端代码：

//import fileDownload from 'js-file-download'

axios.get(serverurl + 'download', { params: { file_uniquename: file_uniquename }})
    .then(res => {
        //fileDownload(res.data)
        //console.log(res.headers['Content-disposition'])
        console.log(res.headers)
    });

1. CORS跨域限制导致非简单响应头无法读取 #

浏览器的CORS机制规定：只有Cache-Control、Content-Type这类简单响应头能默认被前端JavaScript读取。Content-Disposition属于非简单头，必须在服务器端通过Access-Control-Expose-Headers明确暴露，否则Axios无法获取。

解决步骤： #

在服务器端配置暴露指定响应头：

// 方式1：全局CORS配置时指定
app.use(cors({
  exposedHeaders: ['Content-Disposition', 'Content-Type']
}));

// 方式2：在/download接口单独设置
app.get("/download", (req, res) =>{
    // ... 原有逻辑
    res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition, Content-Type');
    // ... 原有逻辑
})

2. Axios未配置正确的响应类型 #

默认情况下Axios会尝试将响应解析为JSON，而文件流是二进制数据，这会导致响应处理异常，间接影响头信息读取。需指定responseType为blob或arraybuffer。

解决步骤： #

修改前端请求配置：

axios.get(serverurl + 'download', { 
  params: { file_uniquename: file_uniquename },
  responseType: 'blob'
})
.then(res => {
    // Axios会将响应头名转为小写
    console.log(res.headers['content-disposition']);
    // 解析文件名示例
    const disposition = res.headers['content-disposition'];
    const filename = disposition.split('filename=')[1];
    // 实现文件下载示例
    const url = window.URL.createObjectURL(res.data);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    window.URL.revokeObjectURL(url);
});

3. 服务器端响应头拼写错误 #

服务器代码中res.setHeader('Contect-type', mimetype)存在拼写错误，应改为Content-Type，否则头信息无法被正常识别。

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