如何将mp3文件从Java后台发送到前端，并在Vue.js前端播放

Question

我们有一个Spring Boot java后端和一个Vue.js前端。后端API代码调用外部接口获取MP3，Vue.js前端调用后端API获取mp3文件并播放。现在，浏览器有时会表现出不稳定的行为，有时会因为CORS问题而不播放mp3。

正因为如此，我想在后端下载文件，并返回字节到前端。我对前端非常陌生，想知道从后端下载mp3的最好方法是什么，mp3文件应该以什么格式发送到前端，以及如何使用javascript(vue)将字节转换为mp3。

请注意，文件大小非常小。该文件是小于5秒的mp3文件，所以我不想将该文件存储在服务器中。

Answer 1

在Spring中，你可以返回一个字节数组：

File f = new File("/path/to/the/file");
byte[] file = Files.readAllBytes(f.toPath());

HttpHeaders headers = new HttpHeaders();
headers.set("Content-Disposition", "attachment; filename=\"" + f.getName() +".wav\"");
ResponseEntity<byte[]> response = new ResponseEntity(file, headers, HttpStatus.OK);

return response;

然后在javascript中获取它，如下所示：

import fileDownload from 'js-file-download';

const { data } =  await axios.get(`http://api.url`, {
        responseType: 'arraybuffer',
        headers: { 'Accept': '*/*', 'Content-Type': 'audio/wav' }
    }).then(resp => resp);
    const blob = new Blob([data], {
        type: 'audio/wav'
    })
    const url = URL.createObjectURL(blob);

    fetch(url)
        .then(res => res.blob())
        .then(blob => fileDownload(blob, 'your_filename'))
        .catch(e => console.log('ERROR DOWNLOADING AUDIO FILE'));

我使用了React和axios，但我希望您能处理;)