은(는) 위험할 수 있으므로 다운로드 하지 않습니다. 오류 해결

에러 내용

---

은(는) 위험할 수 있으므로 다운로드 하지 않습니다.

파일을 다운로드하는데 다음과 같이 오류가 나타난다.

 

에러 원인

---

구글 크롬 정책상 외부 사이트에서 직접적으로 파일을 다운로드하는 것은 경고를 보낸다

 

해결 방법

---

blob으로 바꿔서 내부 오브젝트 url을 만든다

해결된 모습

 

아래는 react로 이를 구현한 코드이다.

핵심은 file download 링크에서 response을 받고 blob으로 변환한 오브젝트를 내부 URL로 다운로드할 수 있도록 변경하는 것이다.

const AttachmentsIcon = ({ attachments }) => {
  if (attachments === undefined || attachments.length === 0) {
    return <></>;
  } else {
    async function handleFileDownload() {
      for await (const fileId of attachments) {
        //window.open(DOWNLOAD_URL + "/" + fileId, "_blank");
        const response = await fetch(DOWNLOAD_URL + "/" + fileId, {
          method: "get",
        });

        const filename = response.headers.get("pragma");
        console.log(filename);
        const file = await response.blob();
        const downloadUrl = window.URL.createObjectURL(file);
        const anchorElement = document.createElement("a");
        document.body.appendChild(anchorElement);
        anchorElement.download = filename; // a tag에 download 속성을 줘서 클릭할 때 다운로드가 일어날 수 있도록 하기
        anchorElement.href = downloadUrl; // href에 url 달아주기

        anchorElement.click(); // 코드 상으로 클릭을 해줘서 다운로드를 트리거
        console.log(anchorElement);
        document.body.removeChild(anchorElement); // cleanup - 쓰임을 다한 a 태그 삭제
        window.URL.revokeObjectURL(downloadUrl); // cleanup - 쓰임을 다한 url 객체 삭제
      }
    }
    return (
      <IconButton edge="end" onClick={handleFileDownload}>
        <AttachFileOutlined />
      </IconButton>
    );
  }
};

 

참고 자료

---

 

Reading response headers with Fetch API

 

자바스크립트로 파일 다운로드하기