How to download image with javascript in the client and avoid CORS error

Question

In my React application I correctly show and image (in this case an SVG) and I want that the user can download it clicking on a button. The image is served by Firebase Storage.

It doesn't works because I got he CORS error:

Access to fetch at 'xxxxxxxxxxx from origin 'http://localhost:3000' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

This is my code:

export const Download = () => {

  const url = "https://storage.googleapis.com/xxxxxxxxxx-c1d67.appspot.com/KYi5nFkjgJPuIxeDkuzvC8XfP6A3/1673110077807-0.svg?GoogleAccessId=xxxxxxxxxxx"

  const handleClickDownload = (fileUrl: string) => {
    fetch(fileUrl, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/pdf',
      },
    })
      .then((response) => response.blob())
      .then((blob) => {
        // Create blob link to download
        const url = window.URL.createObjectURL(
          new Blob([blob]),
        );
        const link = document.createElement('a');
        link.href = url;
        link.setAttribute(
          'download',
          `filename.svg`,
        );

        // Append to html link element page
        document.body.appendChild(link);

        // Start download
        link.click();

        // Clean up and remove the link
        link.parentNode?.removeChild(link);
      });
  }

  return (
    <div>
      <img src={url} alt='result' />
      <button onClick={() => handleClickDownload(url)}>Download SVG</button>
    </div>
  )
};

Avoid the `fetch` and create the `link` with `link.href = "https://storage.googleapis.com/..."` directly. — Heiko Theißen, Jan 07 '23 at 17:25
Possibly related: https://stackoverflow.com/questions/52776659/how-to-correctly-set-content-disposition-for-firebase-storage — jub0bs, Jan 07 '23 at 17:52
@HeikoTheißen ok, I tried and it solve the CORS error. But the file isn't downloaded. The browser just open the image in the same tab, or in another tab if I use "target=_blank". — fabio, Jan 07 '23 at 17:55

score -2 · Accepted Answer · edited Jan 10 '23 at 08:50

-2

As explained here CORS in Firebase Storage must be enabled:

Firebase Storage and Access-Control-Allow-Origin

edited Jan 10 '23 at 08:50

E_net4

27,810
13
101
139

answered Jan 09 '23 at 18:21

fabio

43
7

How to download image with javascript in the client and avoid CORS error

1 Answers1