Добре, така че от 2 дни се опитвам да изпратя аудио файл като директно изтегляне в браузъра от node js backend (порт 8081) към vue js client frontend (port 8080) при http заявка (чрез axios) .
Има някои теми по този въпрос в препълването на стека, но нито една от тях не реши проблема ми, вероятно съм допуснал грешка някъде, но просто не мога да видя къде точно.
Моят браузър/клиент получава отговора, но не го превежда в директно изтегляне, ето как изглежда:
{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 сървър
router.get('/download/:id', async (req, res) => {
const tracks = await loadTracksCollection();
var id = new mongodb.ObjectID(req.params.id);
var track = await tracks.findOne({ _id: id });
var trackPath = String(track.path);
var trackName = String(track.user + ' - ' + track.name + '.mp3');
res.download(trackPath, trackName, (err) => {
if (err) {
console.error(err);
return ;
} else {
tracks.updateOne({ _id: id }, { $inc: { downloadCount: 1 } });
// return res.status(200).send('The download should start ...')
}
});
});
компонент на бутона vue.js
<template>
<v-btn @click="download" depressed block color="accent"><unicon name="import" fill="white" /></v-btn>
</template>
<script>
import axios from 'axios'
export default {
props: {
fileId: {
required: true,
type: String
}
},
methods: {
download() {
axios.get(process.env.VUE_APP_AUDIO_API_URL + '/api/tracks/download/' + this.fileId)
.then(response => {
console.log(response)
})
.catch(error => {
console.error(error)
})
}
}
}
</script>
уведомете ме, ако е необходим още код!
Благодаря много !