У меня есть веб-приложение, созданное в React. Для большинства URL-адресов требуется аутентификация (Bearer). Одной из конечных точек API является загрузка ZIP-файла. Я не уверен, как вызвать загрузку файла в браузере клиентов. Я не могу сделать <a>, потому что для этого нужен токен Bearer. Приложение React может загрузить его, но как мне заставить браузер принять загрузку? Спасибо.
@FelixKling Спасибо, я удалил тег реакции.



![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)


Вот как вы запускаете загрузку:
fetch("https://yourfiledownload.api/getfile", {
method: "POST",
headers: {
'Content-Type': 'application/json',
'Authorization': 'Bearer XXXXXXXXXXX'
}
})
.then(response => {
const disposition = response.headers.get("content-disposition");
filename = disposition.match(/filename=(.+)/)[1];
return response.blob()
})
.then(blob => {
const url = window.URL.createObjectURL(blob);
const a = document.createElement('a');
a.href = url;
a.download = filename;
document.body.appendChild(a); // we need to append the element to the dom -> otherwise it will not work in firefox
a.click();
a.remove(); //afterwards we remove the element again
callback({msg: 'ok'})
})
Это предполагает, что ваш API возвращает правильные данные, включая заголовки. Что-то вроде этого, например, в случае файла CSV:
res.setHeader('Access-Control-Expose-Headers', 'Content-Disposition');
res.setHeader('Content-disposition', 'attachment; filename=' + filename);
res.set('Content-Type', 'text/csv');
res.write("Some Data here");
res.end();
Обратите внимание, что Content-Disposition необходим для того, чтобы имя файла определялось вашим API и отправлялось обратно клиенту.
Кажется, это не имеет ничего общего с React. Взгляните на Как я могу скачать файл с помощью window.fetch?