Downloading an image without direct backend server access


I have a button to download an image. this image is not a file on the server but its stored in a database.

When the user clicks the button I could, of course, call a backend function which loads the data from the database and stores it into a file and then give back the URL to this file, but I don’t like the idea of direct access to my backend server from the user.
So I thought I just call the backend, which is then loading the image data, do a base64 encoding and give it back to the front end.
My problem now is how can I start an automated download of this image? For a text file I have found a solution that looks like this:

const downloadLink = document.createElement("a");
        downloadLink.href = "data:x-application/xml;charset=utf-8," + document.getElementById("progressPanelProtocol").value.replaceAll(/\r\n|\r|\n/g, "<br>")); = "Filename_" + + ".html";


but how can I do this with an image instead?

Can you not just have your backend api send the appropriate headers (Content-disposition) to download the image and then do a simple redirect to that endpoint?

I… uhhh… what? That’s still the browser directly accessing your backend server.