로그인 API 요청 성공 시 헤더에 Token 값을 실어서 응답했다.
로그인 API 응답 성공하고 Postman, 크롬 Network 탭에는 헤더에 Authenticaion: 토큰 값
이 잘 들어갔다.
하지만 리액트 콘솔에서는 Authentication이 뜨지 않아 토큰 값을 가져올 수 없는 문제가 발생했다.
다음과 같이 스프링에서 exposeHeaders
에 Authenticaion
을 추가한다.
MDN 문서에 따르면 CORS를 발생시키는 요청은 다음과 같다.
다음은 Axios 공식 문서 소개 중 일부다.
Axios is a *[promise-based](https://javascript.info/promise-basics)* HTTP Client for [node.js](https://nodejs.org/) and the browser.
It is *[isomorphic](https://www.lullabot.com/articles/what-is-an-isomorphic-application)* (= it can run in the browser and nodejs with the same
codebase). On the server-side it uses the native node.js http module,
while on the client (browser) it uses XMLHttpRequests.
Axios는 XMLHttpRequests
를 이용한다고 공식문서 소개에 나와있다.
따라서 Axios는 CORS를 발생시킨다.
따라서 우리가 추가한 헤더인 Authentication
은 안 보인다.
Access-Control-Expose-Headers
위 헤더를 사용하면 브라우저가 접근할 수 있는 헤더를 서버의 화이트리스트에 추가할 수 있다.
ex. 예는 다음과 같다.
Access-Control-Expose-Headers: X-My-Custom-Header, X-Another-Custom-Header
X-My-Custom-Header
와 X-Another-Custom-Header
헤더가 브라우저에 드러난다.
참고
Axios Response header의 값이 없는 경우에 대해
교차 출처 리소스 공유 (CORS) - HTTP | MDN