s3객체 URL을 ZIP파일로 변환이슈...경험담

오류발생

 await fetch(`${s3_imageUrl}`,
  {
    method: 'GET',
  });

• CORS오류 발생...이게 무엇이지 당황 구글링을 통한 AWS 버킷에서 CORS셋팅을 수정해야한다는 답을 찾았습니다

해답

-> origins 설정을 모든 출처 접근가능 허용인 "*"로 수정

해당부분까지 했을 때 해결을하였다는 글을 많이 찾아보았습니다

근데 저는 해결이 안되고 특정부분에서 CORS 오류가 지속적으로 발생하였습니다

수정방법

await fetch(`${s3_imageUrl}`,{
        method: 'GET',
        mode: 'cors',// mode: "cors", // same-origin, no-cors
        cache: 'no-store',
      }

• mode:'cors' : cross-origin 요청을 할 때 사용
• cache:'no-store' : 브라우저에게 해당 요청에 대한 응답을 캐시에 저장하지 않도록함

해당부분 2개로 CORS 오류를 해결하였습니다

리액트에서 ZIP파일 변환하기

npm install jszip

공식문서

2. 전체코드

  let zip = new JSZip();
 await fetch(${s3_imageUrl}, {
        method: 'GET',
        mode: 'cors',
        cache: 'no-store',
      })
        .then(async (response) => {
          const arrayBuffer = await response.arrayBuffer();
          const filename = `${파일명}.png`;
          zip.file(filename, arrayBuffer, { binary: true });
        })
        .catch((err) => {
          console.log(err);
        });
        
	zip.generateAsync({ type: 'blob' }).then((content) => {
      download({ fileName: `${폴더명}.zip`, data: content });
    });

정상적으로 다운로드 되는것을 알 수있었습니다!
작업코드에서 필수적인 코드만 가져온 코드들 입니다