React中使用axios.post调用Core WebAPI下载文件失败求助

嘿，这个问题我太熟了！你踩了axios POST请求参数结构的坑——咱们一步步来解决：

你把responseType: "blob"错误地放到了请求的data对象里！axios的POST请求参数结构是：

axios.post(url, 请求体数据, 配置项)

第三个参数才是存放responseType、headers这类配置的地方，第二个参数只用来传请求体里的data，所以之前的写法相当于你把responseType当成了业务数据传给后端，axios根本没收到这个配置，自然没法正确解析响应为Blob，返回的就是乱码损坏的内容。

把responseType移到第三个配置参数里就对了：

axios.post("你的接口URL", { data: data }, { responseType: "blob" })
  .then(response => {
    // 这里是标准的文件下载处理逻辑
    const blob = new Blob([response.data]);
    const downloadUrl = window.URL.createObjectURL(blob);
    const aTag = document.createElement('a');
    aTag.href = downloadUrl;
    aTag.setAttribute('download', 'test.xlsx');
    document.body.appendChild(aTag);
    aTag.click();
    // 清理资源
    aTag.remove();
    window.URL.revokeObjectURL(downloadUrl);
  })
  .catch(err => {
    console.log('下载出错啦:', err);
  });

因为axios的GET请求参数结构是axios.get(url, 配置项)，没有单独的请求体参数，所以你直接把responseType放到第二个参数（配置项）里，axios能正确识别并解析响应；而POST多了个请求体参数，你搞错了位置，才导致失效。

• 确认后端返回的Content-Type和你期望的一致（这里是application/vnd.openxmlformats-officedocument.spreadsheetml.sheet），避免解析异常
• 如果接口需要权限头（比如Authorization），也要把它放到第三个配置参数的headers对象里，别和data混在一起

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