Загрузка файлов на клиент с помощью django и GCP
Я пытаюсь скачать файл из Django на клиент с помощью GCP. В настоящее время запрос делается из axios, файл берется из GCP с помощью url из модели. Затем этот файл загружается и возвращается в виде HTTP-ответа клиенту. На вкладке "Сеть" я вижу ответ 200 OK, и изображение видно в предварительном просмотре. Однако загрузка не сохраняется на рабочем столе клиента. Буду признателен за любые предложения
Метод загрузки:
def download(request, pk):
url = Model.objects.get(id=pk).__dict__["file1"]
storage_client = storage.Client()
bucket = storage_client.get_bucket(setting("GS_MEDIA_BUCKET_NAME"))
blob = storage.Blob(url, bucket)
filename = url.rsplit("/", 1)[1]
file_path = "temp/" + filename
file_to_download = open(file_path, "rb")
mime_type, _ = mimetypes.guess_type(file_path)
response = HttpResponse(file_to_download, content_type=mime_type)
response["Content-Disposition"] = "attachment; filename=%s" % filename
return response
Заголовки ответа
HTTP/1.1 200 OK
Date: Fri, 29 Oct 2021 08:01:15 GMT
Server: WSGIServer/0.2 CPython/3.9.7
Content-Type: image/jpeg
Content-Disposition: attachment; filename=default.jpg
Vary: Origin
Access-Control-Allow-Origin: http://localhost:3000
X-Frame-Options: SAMEORIGIN
Content-Length: 10994
X-Content-Type-Options: nosniff
Referrer-Policy: same-origin
Заголовки запроса
GET /api/models/download/26/ HTTP/1.1
Connection: keep-alive
sec-ch-ua: "Chromium";v="94", "Google Chrome";v="94", ";Not A
Brand";v="99"
Accept: application/json, text/plain, */*
sec-ch-ua-mobile: ?1
User-Agent: Mozilla/5.0 (Linux; Android 6.0; Nexus 5
Build/MRA58N) AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/94.0.4606.81 Mobile Safari/537.36
sec-ch-ua-platform: "Android"
Origin: http://localhost:3000
Sec-Fetch-Site: same-site
Sec-Fetch-Mode: cors
Sec-Fetch-Dest: empty
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Это печальный день для axios и content-disposition https://medium.com/@drevets/you-cant-prompt-a-file-download-with-the-content-disposition-header-using-axios-xhr-sorry-56577aa706d6
Решением будет следующий код, с фронт-энда:
axios({
url: 'http://localhost:5000/static/example.pdf',
method: 'GET',
responseType: 'blob', // important
}).then((response) => {
const url = window.URL.createObjectURL(new Blob([response.data]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', 'file.pdf');
document.body.appendChild(link);
link.click();
});