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

Denia·2022년 6월 2일
2

TroubleShooting

목록 보기
2/24

개요

이번 글에서는 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")

오늘의 교훈

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

profile
HW -> FW -> Web

0개의 댓글