24/08/16(금) 100번째 TIL : CORS 커스텀 응답 헤더 가져오기

 

문제

과거 프로젝트에서 JWT을 이용한 인증 방식을 택해서, 액세스 토큰 및 리프레쉬 토큰을 커스텀 응답 헤더에 넣어서 보내주었다. 하지만 프론트에서 응답 헤더에서 받아올 수 없었다. 

---

해결

기본적으로, 응답 헤더는 CORS-safelisted response header 만 노출된다. (simple response header 라고도 한다) CORS-safelisted response header란, 클라이언트의 스크립트에 노출되어도 안전하다고 여겨지는 헤더들이다. 기본적으로 아래와 같은 헤더들이 있다. 

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

 

이 외의 헤더들은 Access-Control-Expose-Headers 로 허용을 해주어야 한다. 

 

---

 

따라서 커스텀 응답 헤더를 프론트에서 받기 위해서는 스프링 기준으로 아래와 같이 작성해주면 된다.

주석으로 밑부분에 여기 라고 적은 부분! 

Spring Security 미사용

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig {

    public static final String[] ALLOWED_ORIGINS = {
            "http://localhost:3000"
    };

    public static final String[] ALLOWED_METHODS = {
            HttpMethod.GET.name(),
            HttpMethod.POST.name(),
            HttpMethod.PUT.name(),
            HttpMethod.DELETE.name(),
            HttpMethod.OPTIONS.name()
    };

    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/**")
                        .allowedOrigins(ALLOWED_ORIGINS)
                        .allowedMethods(ALLOWED_METHODS)
                        .allowedHeaders("*")
                        .allowCredentials(true)
                        .maxAge(3600)
                        // 여기 !
                        .exposedHeaders("Custom-Response-Header1", "Custom-Response-Header2");
            }
        };
    }
}

---

Spring Security 사용

    @Bean
    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {

        http.cors(getCorsConfigurerCustomizer());
        // ... 

        return http.build();
    }

    private Customizer<CorsConfigurer<HttpSecurity>> getCorsConfigurerCustomizer() {
        return corsConfigurer -> corsConfigurer.configurationSource(request -> {
            CorsConfiguration config = new CorsConfiguration();
            config.setAllowedOrigins(Collections.singletonList("*")); // 모든 오리진 허용
            config.setAllowedMethods(Collections.singletonList("*")); // 모든 메서드 허용
            config.setAllowedHeaders(Collections.singletonList("*")); // 모든 헤더 허용
            // 여기 !!
            config.setExposedHeaders(List.of("Custom-Response-Header1", "Custom-Response-Header2"); 
            return config;
        });
    }

 

---

 

그러면 응답에 다음과 같은 헤더가 포함되게 된다. 

Access-Control-Expose-Headers: Custom-Response-Header1, Custom-Response-Header2

 

팁으로 와일드 카드로 에스터리스크(*)를 사용할 수 있는데, Authorization 헤더는 지정할 수 없어서 명시적으로 작성해주어야 한다.

Access-Control-Expose-Headers: *, Authorization

 

 

 

 

---

참고 링크

• 벨로그1
• MDN : Access-Control-Expose-Headers
• MDN : CORS-safelisted response header