Web - File 다운로드

BE에서 파일의 정보를 주고 FE에서 해당 데이터를 받아 다운로드 할 경우 겪을 수 있는 문제점에 대해 메모한다.

Blob 타입

처음 작업 시작을 할 때는 단순히 BE에서 내려주면 되겄거니 했는데 실제로 해보니 안되더라 ㅎㅎ;;

BE에서 데이터를 내려주는 형태로 바로 다운로드 기능을 할 경우 FE에서는 responseType을 Blob이라는 타입으로 받아서 다뤄야 정상 동작을 할 수 있다.

Content-Type

응답의 컨텐츠 타입에 따라 내가 응답한 데이터의 형태를 명시할 수 있다. 이미 일반적으로 많이 쓰고 있지만 간단히 내가 보낸 데이터는 .xlsx 확장자를 가지는 파일임을 명시하고 싶을 경우 아래의 값을 컨텐츠 타입에 명시하면 된다.

application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

Exposed-Headers

파일을 다운받아야되는 경우라면 Content-Disposition 헤더에 attachment 속성을 넣고 filename 을 넣어서 작성할 수 있다.
이 경우 FE 측에서 받은 filename에 접근하기 위해서는 response의 헤더에 접근을 할 수 있어야 하는데 CORS의 환경에서는 접근할 수 가 없다.
일반적인 공통 응답 헤더들만 접근이 가능하다.

Content-Type, Max-age …

이에 접근을 할 수 있도록 하려면 BE 측에서 CORS 설정 외에 Exposed-Headers 라는 설정을 통해 특정 헤더에 대해 허용해줘야지만 FE 측 소스에서 접근이 가능하다.