如何使用 axios 下载 Spring 引导 ByteArrayResource？

Question

I have a Spring Boot Rest application, and I want to pass a file from this to a Vue.js frontend with axios.
Firstly I get some data from Google Cloud Storage and send it to my frontend like this:
Get from gcloud:

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

Send with 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);
    }

Then I get the file in my frontend and try to save it, but the file is always corrupt.
Axios Request:

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);
            });
        }

At the minute I've only tested this with a PNG file of a little robot, but I intend to be able to download JPGs, PDFS and MP3s as well. Any help would be massively appreciated.
I've also noticed that the headers I define in the Spring Boot response aren't visible from the frontend.

Answer 1

Worked it out, I need to put responseType: 'blob' in my axios request.