[JWT] vue.js에서 응답헤더의 Authorization 받는 법(undefined 문제)

1. 문제

서버에서 HTTP 응답헤더에 accessToken을 넣어서 반환하면

클라이언트에서는 accessToken을 받아서 로컬 변수에 저장하여 인증받는 방식을 사용하려는데

아래의 코드를 적용해도 undefined 가 뜨는 경우가 생겼다.

 

async login({ commit }, {id, password}) {
      try {
        const response = await axios.post("http://localhost:8081/api/login", {
          userId: id,
          userPw: password,
        });
        const accessToken = response.headers.get("Authorization");
        if(accessToken){
          const token = accessToken.split(' ')[1];
          console.log(token);
        }
        commit('SET_LOGIN_STATE', true);
      } catch (error) {
        console.error("로그인 실패:", error);
        alert("로그인 정보 불일치");
      }
    },

 

 

2. 해결 방법

이는 서버 CORS 설정 클래스에서 다음 코드를 추가하면 해결된다.

.exposedHeaders(HttpHeaders.LOCATION, "Authorization");

 

 

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/api/**")
                .allowedOrigins("http://localhost:8080")  // 클라이언트 주소
                .allowedMethods("GET", "POST", "PUT", "DELETE")
                .allowCredentials(true)  //클라이언트가 쿠키 또는 인증정보를 요청에 포함할 수 있음
                .exposedHeaders(HttpHeaders.LOCATION, "Authorization"); //클라이언트가 응답헤더를 접근할 수 있도록 함
    }
}

 

 

3. 해결 결과

undefined 로 뜨던 문제가 다음과 같이 accessToken이 추출된다.