Spring CORS 에러 [간단한 이슈] : allowedOrigins

개요

이번 글에서는 Spring CORS 설정을 하다가 간단한 설정을 못해서 1시간 넘게 고생한 이야기를 적어보겠다.

글의 핵심부터 말하면 allowedOrigins 메서드 관련된 이야기다.

---

문제 상황

Front와 협업중에 구매한 도메인을 적용했고 서버에서 데이터를 문제없이 내려주기 위해서 CORS에 해당 도메인을 등록했다. 해당 도메인을 등록하고 나니까 localhost:3000 [즉, 프론트쪽 리액트 local] 에서 spring 서버로 접근이 안되는 현상이 발생했다.

그때 내가 작성한 코드는 아래와 같다.

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        		.allowedOrigins("http://localhost:3000")
                .allowedOrigins("https://test.com")
                .allowedOrigins("https://www.test.com")
    }
}

---

해당 코드를 짠 이유

내가 코드를 이렇게 짠 이유는
Spring Security 설정 중에 httpSecurity 관련 설정이 있는데 해당 설정에서는 이렇게 중복해서 값을 Setting 할 수가 있다.

// @EnableWebSecurity
// @EnableGlobalMethodSecurity
// public class SecurityConfig extends WebSecurityConfigurerAdapter 
// (WebSecurityConfigurerAdapter 를 상속받은 SecurityConfig 용 Class)

 @Override
    protected void configure(HttpSecurity httpSecurity) throws Exception {

        httpSecurity
                .authorizeRequests()
                .antMatchers("/aappii/test1/**").permitAll() //Test용 메서드는 권한설정X
                .antMatchers("/aappii/test2/**").permitAll() //Test용 메서드는 권한설정X
                .antMatchers("/aappii/test3/**").permitAll() //Test용 메서드는 권한설정X
                .anyRequest().authenticated() // 나머지 API는 권한 설정
    }

그래서 당연히 CORS 설정에서도 그렇게 적용이 가능한 줄 알고

이렇게 썼더니 맨 밑에 줄(www.test.com)만 적용이 되고 나머지는 적용이 안되서 나머지 사이트(test.com , localhost:3000)에서 접근시에 CORS 문제가 자꾸 나왔다.

@Configuration
public class CorsConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
        		.allowedOrigins("http://localhost:3000")
                .allowedOrigins("https://test.com")
                .allowedOrigins("https://www.test.com")
    }
}

(※처음에는 allowedOrigins 중복해서 써서 문제가 될 것이라고는 0.01%도 생각을 하지 못했다.)

---

문제 해결

이유를 찾기 위해서 구글링을 한시간 넘게 찾으면서 코드를 고치고 테스트 해보기를 반복하다가 전에도 봤지만 전에 본 글들에서 내가 무언가를 놓친게 있다 다시 천천히 살펴보기를 시작했다.

그때 참고한 블로그

해당 블로그에서 allowedOrigins 에는 여러 Origin을 한번에 설정 할 수 있다 라는 글을 유심히 보게 됐고 혹시? 하면서 메서드 정의를 제대로 살펴 봤던게 정답이었다.

---

결론

이렇게 써야하는걸 중복해서 allowedOrigins를 사용했더니 값이 계속해서 덮어씌여지면서 앞에 Setting 값들이 다 날아감😂...

.allowedOrigins("http://localhost:3000", "https://test.com" , "https://www.test.com")

---

오늘의 교훈

메서드를 사용할 때 메서드의 설명에 관해서 침착하게 자세히 잘 읽어보자 !!!