CORS 헤더 설정을 위해서 WebMvcConfigurer의 addCorsMappings() 메서드에서 아래와 같이 헤더를 설정하였다.
그런데 프론트(Vue.js)에서 서버로 요청을 보냈을 때 어떤 응답은 Access-Control-XXX-XXX 헤더가 위 이미지에서 설정한대로 존재하고, 어떤 응답에서는 아래 이미지처럼 존재하지 않았다. 그래서 CORS 정책에 의해 block 당했다. 왜 CORS 관련 헤더가 설정되지 않을까?
그 이유는 Spring Security를 의존성 추가하여 사용하고 있는데, Spring Security와 WebMvcConfigurer 구현체를 함께 사용하는 경우, Spring Security가 우선적으로 요청을 처리하는데, SecurityFilterChain Bean을 생성할 때, HttpSecurity에 cors()를 설정하지 않으면 WebMvcConfigurer에서 등록한 corsConfiguration이 동작하지 않게 되어 Access-Control-XXX-XXX 와 같은 헤더가 설정되지 않았던 것이다.
따라서 아래 이미지처럼 corsConfiguration이 사용되도록 설정해 주면 된다.
Spring docs 참고
https://docs.spring.io/spring-security/reference/reactive/integrations/cors.html
결과는 아래 이미지와 같다.
버전 정보
Spring Boot: 2.7.11
