如何从Axios get请求中获取响应头参数 解决X-CSRF-TOKEN未定义问题

• 问题1：没有公共存储位置存放获取到的CSRF Token，get请求拿到的Token没有持久化，post请求无法读取到对应变量
• 问题2：axios默认无法读取自定义响应头X-CSRF-TOKEN，需要后端配置跨域规则暴露该响应头
• 问题3：原list方法返回值不符合定义的AxiosPromise<FilesL[]>类型，且form变量未定义、响应头读取写法存在兼容性问题

修复后代码 #

// 全局存储CSRF Token，也可根据业务需求存在pinia、localStorage等持久化位置
let csrfToken = '';

const FileApi= {
  list: async (type:string,period:string): Promise<FilesL[]> => {
    const res = await axios.get(`upload/${type}/${period}`);
    // axios会自动将响应头转为小写，按小写key读取更稳妥
    const token = res.headers['x-csrf-token'];
    if (token) csrfToken = token;
    console.log('获取到的CSRF Token：', csrfToken);
    // 返回接口数据符合原类型定义
    return res.data;
  },
  upload: async (file:File,type:string,period:string): Promise<string> => {
    // 补充原代码缺失的FormData构造逻辑
    const form = new FormData();
    form.append('file', file);
    return axios.post(`file/upload/${type}/${period}`,form,{
      headers :{
        'Content-Type':'multipart/form-data',
        // 传入预存的CSRF Token
        'token' : csrfToken,
      },
    });
  }
}

额外注意事项 #

• 后端跨域配置必须添加Access-Control-Expose-Headers: X-CSRF-TOKEN，否则前端axios默认无法读取自定义响应头，拿到的值永远为undefined
• 必须严格保证调用时序：先调用list接口完成Token存储后，再调用upload接口，否则Token仍会是空值
• 如果CSRF Token存在有效期，需要在过期前重新调用list接口刷新Token

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