[Spring] CORS-safelisted response header 문제 해결하기

문제 상황

2024-1 알파프로젝트 진행 중에 프론트엔드 측에서 다음과 같은 문제 상황을 브리핑 해주었다.

 

끄아아앙

 

현재 Spring Security를 통해 CORS를 허용해준 상황이었음에도 불구하고 CORS를 해결해달라는 요청이 들어왔다.

 

문제 상황을 요약하자면 브라우저의 개발자 도구를 통해 페이로드를 확인해보니 사용자가 직접 추가해준 헤더를 확인할 수 있는데, 프론트(React.js)에서는 추가한 헤더만 접근이 불가능했다. 즉, Authorization이 보이지 않았던 것!

 

예시를 위해 참고한 블로그에서 가져옴. 출처는 밑에 작성!

 

이유

이유는 바로 CORS-safelisted response header라는 것 때문이었다.

 

이 CORS-safelisted response header 에 해당하는 헤더는 CORS 응답인 경우에서 클라이언트의 스크립트에 노출되어도 안전하다고 여겨지는 헤더들이기 때문에 별도의 설정 없이도 스크립트(React.js)에서 접근 가능하다.

 

그러나 추가적인 헤더인 경우(필자는 Authorization) CORS-safelisted response header 에 해당하지 않기 때문에 브라우저의 스크립트에서 접근할 수 없었던 것이다.

 

CORS-safelisted response header 참고

https://developer.mozilla.org/en-US/docs/Glossary/CORS-safelisted_response_header

 

 

해결

따라서, Access-Control-Expose-Headers 응답 헤더를 사용하면 된다. Access-Control-Expose-Headers는 cross-origin 요청에 대한 응답인 경우, 해당 응답의 헤더 중에서 브라우저의 스크립트(Java Script...등)가 접근 가능한 헤더를 지정하는데 사용한다.

 

Spring Security 6.x 버전 CorsConfigurationSource에 다음과 같은 expose-header를 추가해주어 해결할 수 있었다.

// cors configuration
@Bean
CorsConfigurationSource corsConfigurationSource() {
    CorsConfiguration configuration = new CorsConfiguration();
    configuration.setAllowedOriginPatterns(List.of("*"));
    configuration.addAllowedHeader("*");
    configuration.setAllowedMethods(List.of("GET", "POST", "PATCH", "DELETE"));
    configuration.setAllowCredentials(true);
    configuration.addExposedHeader("Authorization");

    UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
    source.registerCorsConfiguration("/**", configuration);
    return source;
}

 

 

수정 사항을 반영한 이후, 원하는 추가적(사용자 정의) 헤더를 스크립트에서 접근할 수 있게 되었다.

 

 

---

참고

https://velog.io/@rhqjatn2398/Access-Control-Expose-Headers-CORS-safelisted-response-header

Access-Control-Expose-Headers & CORS-safelisted response header