Как сохранить оригинальное имя файла в React при получении из Django?

Я работаю со стеком Django-Graphene-React, и в моем фронтенде пользователь должен иметь возможность загрузить файл из бэкенда.

Работает отлично.

Однако имя файла определено в бэкенде и передается через заголовок Content-Disposition в HttpRequest, отправленном из Django. Но я не могу получить его при получении во фронтенде.

Вот мое представление бэкенда Django, которое генерирует файл:

import io

from django.http import HttpResponse


def download_file_view(request):
    buffer = io.BytesIO()
    # Generate an Excel file and put it a buffer...
    ...
    buffer.seek(0)
 
    response = HttpResponse(
        buffer.read(),
        content_type="application/vnd.openxmlformats-officedocument"
                     ".spreadsheetml.sheet",
    )

    # The filename is generated in the backend (Django) and cannot be
    # generated from the frontend (React)
    response["Content-Disposition"] = "filename.xlsx"

    return response

Если я скачиваю его напрямую, вводя url, присвоенный этому представлению в браузере, я получаю правильное имя файла, когда браузер предлагает мне сохранить файл.

Однако я хочу получить файл во фронтенде, чтобы получить состояние загрузки в то время, когда файл формируется в бэкенде.

Вот мой компонент фронтенда в React:

import {useState) from "react";


const DownloadButton = ({downloadUrl}) => {
  const [isLoading, setIsLoading] = useState(false);

  const fetchExport = async() => {
    try {
      setIsLoading(true);
      const response = await fetch(downloadUrl);

      const header = response.headers.get("Content-Disposition");  // Empty
      console.log(response);  // Headers are empty

      const blob = await response.blob();

      let objectUrl = window.URL.createObjectURL(blob);
      let link = document.createElement("a");
      link.href = objectUrl;

      // By the way, these two lines clears my console and sometimes my
      // development server stops, I don't know why yet.
      link.click(); 
      link.remove(); 

    } catch (error) {
      console.log(error);
    } finally {
      setIsLoading(false);
    }
  }

  if (isLoading){
    return <div>Loading...</div>
  } else {
    return <div onClick={fetchExport}>Download</div>
}

Итак, я получаю файл. Это работает нормально. Но вместо оригинального имени файла я получаю url моего фронтенда и какой-то случайный uuid в качестве имени файла.

CORS_EXPOSE_HEADERS = ['Content-Disposition']