如何使用 axios 下载 Spring Boot ByteArrayResource？

如何解决如何使用 axios 下载 Spring Boot ByteArrayResource？

我有一个 Spring Boot Rest 应用程序，我想将一个文件从这个应用程序传递到一个带有 axios 的 Vue.js 前端。
首先，我从 Google Cloud Storage 获取一些数据并将其发送到我的前端，如下所示：
从 gcloud 获取：

public ByteArrayResource downloadobject(String bucketName,String objectName) {
        BlobId blob = BlobId.of(bucketName,objectName);
        return new ByteArrayResource(storage.readAllBytes(blob));
    }

使用 Spring Boot 发送：

@RequestMapping(value = "/downloadFile",method= RequestMethod.GET)
public ResponseEntity<?> downloadFile(@RequestParam("fileRef") String fileRef){
        String filename = "robot.png";
        ByteArrayResource file = cloudStorage.downloadobject("bucket","object");
        
        return ResponseEntity.ok().header(HttpHeaders.CONTENT_disPOSITION,"attachment; filename=\"" + fileName + "\"")
                .contentLength(file.contentLength()).contentType(MediaType.APPLICATION_OCTET_STREAM).body(file);
    }

然后我在我的前端获取文件并尝试保存它，但文件总是损坏。
Axios 请求：

async downloadFile(fileRef){
            await ApiService.downloadFile(fileRef).then( (res) => {
                var blob=new Blob([res.data],{type: res.headers["content-type"]});
                var fileDownload = require('js-file-download');
                fileDownload(blob,'robot.png');
            }).catch((errr) => {
                console.log(errr);
            });
        }

目前我只用一个小机器人的 PNG 文件对此进行了测试，但我打算也能下载 JPG、PDF 和 MP3。任何帮助将不胜感激。
我还注意到我在 Spring Boot 响应中定义的标头在前端是不可见的。

解决方法

解决了，我需要将 responseType: 'blob' 放在我的 axios 请求中。