Javascript 从node js服务器直接下载vue客户端文件不起作用

好的，我已经尝试了两天，在浏览器中通过http请求（使用axios）将音频文件从node js后端（端口8081）直接下载到vue js客户端前端（端口8080）

有一些关于堆栈溢出的主题，但没有一个解决了我的问题，我可能在某个地方出错，但我似乎看不到确切的位置

我的浏览器/客户端收到响应，但没有将其转换为直接下载，下面是它的外观：

{data: "ID3#TSSELavf57.71.100���…UUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUUU", status: 200, statusText: "OK", headers: {…}, config: {…}, …}
config: {url: "http://localhost:8081/api/tracks/download/5df305bc6cea85c8eac5d3e6", method: "get", headers: {…}, transformRequest: Array(1), transformResponse: Array(1), …}
data: "ID3#TSSELavf57.71.100���..."
headers: {cache-control: "public, max-age=0", content-length: "9775064", content-type: "audio/mpeg", last-modified: "Fri, 13 Dec 2019 03:30:04 GMT"}
request: XMLHttpRequest {readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, onreadystatechange: ƒ, …}
status: 200
statusText: "OK"
__proto__: Object

我是否需要设置代理，我不太清楚如何正确设置？我真的很努力让它工作，哈哈

代码如下：

node.js服务器下载路由

vue.js按钮组件

从“axios”导入axios
导出默认值{
道具：{
文件ID:{
要求：正确，
类型：字符串
}
},
方法：{
下载（）{
get（process.env.VUE_APP_AUDIO_API_URL+'/API/tracks/download/'+this.fileId）
。然后（响应=>{
console.log（响应）
})
.catch（错误=>{
控制台错误（错误）
})
}
}
}

如果需要更多的代码，请告诉我

---

非常感谢

您需要更改axios中的responseType

axios({
    method: 'GET',
    url: process.env.VUE_APP_AUDIO_API_URL + '/api/tracks/download/' + this.fileId,
    responseType: 'arraybuffer'
}).then(response => {
   console.log(response.data)
}).catch(error => {
   console.error(error)
})

---

好吧，这似乎是一个复杂的问题，但我找到了我的解决方案：

      this.$axios({
          method: 'GET',
          url: // ur backend api url,
          responseType: 'arraybuffer'
        })
        .then(response => {
          var blob = new Blob([response.data], {type: response.headers['content-type']})
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = // name the downloaded file
          link.click()
        })
        .catch(error => { 
          // whatever
        })
        .finally(() => {
          // whatever
        }

---

嗨，谢谢你回答我！刚刚尝试过这个，开发工具现在可以控制这个：ArrayBuffer（440651）{}。。。（使用大量int数组）但没有直接下载

axios({
    method: 'GET',
    url: process.env.VUE_APP_AUDIO_API_URL + '/api/tracks/download/' + this.fileId,
    responseType: 'arraybuffer'
}).then(response => {
   console.log(response.data)
}).catch(error => {
   console.error(error)
})

      this.$axios({
          method: 'GET',
          url: // ur backend api url,
          responseType: 'arraybuffer'
        })
        .then(response => {
          var blob = new Blob([response.data], {type: response.headers['content-type']})
          var link = document.createElement('a')
          link.href = window.URL.createObjectURL(blob)
          link.download = // name the downloaded file
          link.click()
        })
        .catch(error => { 
          // whatever
        })
        .finally(() => {
          // whatever
        }