axios요청 후 커스텀 header값 못 읽는 문제해결 방법(JWT)

 

Vue <-> Springboot API서버를 JWT를 사용한 형태로 구현하다가 서버쪽에서는 정상적으로 헤더에 심어서 값을 전달하였다.

그리고 F12를 눌러서 네트워크상에서 확인해보면 그 값을  볼 수 조차 있는데 JS에서 가져와서 사용하려고 하는 순간 값을 제대로 못 읽는 경우가 이번에 발생했다.

다음과같이 값이 잘만 보인다.(만료된 토큰입니다)

그러나 js에서 axios요청 후 다음과 같이 확인해보려고 하면?

undefined로 떠버린다.

const accessToken = res?.headers['authorization'];
const refresh = res?.headers['authorization-refresh'];
console.log('accessToken is :', accessToken);
console.log('refreshToken is :', refresh);

헤더를 정상적으로 가져와서 확인하고 있지만, 헤더가 실제로 존재하고 f12로 확인하는 탭에서도 확인 가능하지만 js에서는 읽지못하는 이상한 상황이 발생한다.

 

왜 그런지 이해가 안되서 여러가지를 찾다가 다음 글을 발견했다.

아래 블로그에서는 CORS쪽 설정을 할때 exposedHeader값을 추가해주라고 한다.
기본적인 설정의 경우 header값을 읽어오는데 제한적이라고 한다.

CORS때문에 헤더에 접근하는 것에 제한이 걸린다. 이런 제한 때문에 추가적인 설정이 없으면 몇몇 standard header값들만 확인할 수 있다.(Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Pragma)

서버 측 코드를 수정해주어야 한다. ACCESS-ORIGIN-EXPOSED-HEADERS를 수정한다.

 

참고사이트 2개 주소

Axios Response header의 값이 없는 경우에 대해

Axios Response header의 값이 없는 경우에 대해

SpringBoot에서 CORS할 때 header, preflight 이슈 해결하기

SpringBoot에서 CORS할 때 header, preflight 이슈 해결하기

여기에 자세히 설명이 되어있다.

[Spring] 스프링의 CORS설정

[Spring] 스프링의 CORS설정

 

 

최종적으로 CorsConfig쪽에서 추가적인 헤더설정을 해 주고나니 동일코드지만 원하는 형태로 동작한다.

@Configuration
public class CorsConfig {

	@Bean
	public CorsFilter corsFilter(){
		UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
		CorsConfiguration config = new CorsConfiguration();
		config.setAllowCredentials(true);		// json 서버 응답을 자바스크립트에서 처리할 수 있게 해줌
		config.addAllowedOriginPattern("*");	// 모든 IP에 응답을 허용 allowedOrigins true 일때 addAllowedOrigin *값 사용 불가능
		config.addAllowedMethod("*");			// 모든 HTTP METHOD 허용
		config.addAllowedHeader("*");			// 모든 HTTP HEADER 허용
		config.addExposedHeader(JwtProperties.HEADER_STRING);
		config.addExposedHeader(JwtProperties.REFRESH_HEADER_STRING);
		source.registerCorsConfiguration("/**", config);
		return new CorsFilter(source);
	}

}