문제 상황

통상적으로 다운로드 버튼을 만들 듯이 <a href={다운로드 경로} download="다운로드 파일 이름 지정" />이렇게 s3에서 파일을 다운받으려고 시도했으나 CORS error로 좌절되었다.
<a>태그에서는 header를 따로 지정할 수 없기에 멘붕에 빠졌다.

해결 방법

1. cors를 해결할 수 있도록 우선 cors-anywhere과 같은 프록시 서버를 생성했다.
2. <a>태그에는 직접적으로 header 설정이 어렵기에, 편법으로 함수를 하나 만들어서, 그곳에서 파일을 fetch를 사용하여 다운로드 한 뒤, 다운로드 된 raw파일을 가지고 <a>태그를 만들어내도록 했다.

  const handleDownload = () => {
    fetch(`파일 다운로드 경로`, { method: 'GET' })
      .then((res) => {
        return res.blob() // raw 데이터를 받아온다
      })
      .then((blob) => {
        const url = window.URL.createObjectURL(blob) // 받아온 날 상태의 data를 현재 window에서만 사용하는 url로 바꾼다
        const a = document.createElement('a')
        a.href = url
        a.download = product.fileUrls[0].name // 원하는 이름으로 파일명 지정
        document.body.appendChild(a)
        a.click() // 자동으로 눌러버리기
        setTimeout((_) => {
          window.URL.revokeObjectURL(url) // 해당 url을 더 사용 못하게 날려버린다
        }, 60000)
        a.remove() // a를 다 사용했으니 지워준다
      })
      .catch((err) => {
        console.error('err: ', err)
      })
  }

참고자료

• [react] s3 파일 다운로드 버튼 구현
• image Blob 객체를 url로 바꾸어 img 띄우기