[Axios] Response Headers의 Content-Disposition 항목이 없는 이슈

Axios를 이용해 파일다운로드 모듈 제작중 서버에서 받아온 파일명을 처리하던중에 아래와 같이 서버에서 Content-disposition 헤더를 받았는데 Axios의 Response 객체에는 담겨있지 않는 이슈가 발생했다.

(이미지 출처 - https://github.com/axios/axios/issues/895)



원인

이미지 출처에도 나와있듯이 CORS 이슈이며, 서버에서 작업을 수행해 줘야 한다.





해결방법
1004lucifer
[ Java (Spring-Boot) ] 환경

@RestController
@RequestMapping("/api/files")
@CrossOrigin(value = {"*"}, exposedHeaders = {"Content-Disposition"})
public class FileBoundary {
   // code ...
}

[ node.js + express + cors ] 환경

app.use(cors({
  origin: 'http://localhost:8080',
  credentials: true,
  exposedHeaders: ['Content-Disposition']
}))

참고
 - https://github.com/axios/axios/issues/895
 - https://rieckpil.de/howto-up-and-download-files-with-react-and-spring-boot/