로그인 성공 후 Response Header의 Token이 없음

로그인 API 요청 성공 시 헤더에 Token 값을 실어서 응답했다.
로그인 API 응답 성공하고 Postman, 크롬 Network 탭에는 헤더에 Authenticaion: 토큰 값이 잘 들어갔다.

하지만 리액트 콘솔에서는 Authentication이 뜨지 않아 토큰 값을 가져올 수 없는 문제가 발생했다.

 

해결

다음과 같이 스프링에서 exposeHeaders에 Authenticaion을 추가한다.

 

 

Axios는 왜 CORS를 발생시킬까

MDN 문서에 따르면 CORS를 발생시키는 요청은 다음과 같다.

다음은 Axios 공식 문서 소개 중 일부다.

 

 

What is 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를 발생시킨다.

 

 

CORS 요청의 경우 브라우저는 기본적으로 다음 응답 헤더에만 접근할 수 있다.

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

따라서 우리가 추가한 헤더인 Authentication은 안 보인다.

 

 

Access-Control-Expose-Headers

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