클라이언트에서 response.headers['content-disposition'] 호출할 때 undefined로 가지고 올 수 없는 문제. 네트워크에는 response 헤더에 노출 됨.

문제

Front에서 파일 다운로드 기능 구현 중, Content-Disposition Response 헤더에 정의되어 있는 fileName을 가지고 오려고 했다.

response.headers['content-disposition'] 를 해보지만 undefined이다.

 

 

네트워크 헤더에는 filename을 가지고 오고 있었다.

 

원인

기본적으로, 브라우저는 CORS(Cross-Origin Resource Sharing)요청에 대한 응답에서 몇 가지 표준 헤더만 클라이언트에게 노출한다. 

기본 표준 헤더는 아래와 같다. 

• Cache-Control
• Content-Language
• Content-Type
• Expires
• Last-Modified
• Pragma

 

그래서 위 값들은 response.headers에 존재하였다.

 

 

기본적으로 클라이언트에 노출되지 않는 값을 클라이언트에서 접근하려면 서버 측에서 Access-Control-Expose-Headers 헤더를 설정해야한다.

 

해결

아래 설정을 서버에서 CorsFilter 설정하는 부분에 추가한다.

response.addHeader("Access-Control-Expose-Headers", "Content-Disposition");

 

클라이언트에서 response.headers['content-disposition'] 로 값이 가져와진다.

 

response.headers에 'content-disposition'이 포함되어 있다.

 

 

참고

https://soobindeveloper8.tistory.com/866

Response headers 에 Content-Disposition 안보임 😥Cors 관련인가 ?