[SpringBoot] CORS 에러

https://oddpoet.net/blog/2017/04/27/cors-with-spring-security/

CORS 설정과 Spring Security

API 서버와 Frontend의 도메인 주소가 다른 상태로 작업할 경우 연동 시 CORS 에러가 나게 되는데, 이를 해결하기 위해서는 서버에서 별도의 설정을 해주거나 react의 경우 프록시 서버 설정을 해주는 것으로 해결된다는 글을 봤었다.

일단 내가 프로젝트를 진행하면서 해결한 방법은 서버에서 설정하는 것이었으므로 내가 해결한 방법대로 글을 남기려고 한다.

 

기본적으로는 두가지의 방법이 있다.

하나는 Controller마다 CrosOrigin 어노테이션을 붙이는 방식이고, 하나는 설정 메소드를 통해 설정해야 한다.

1. @CrosOrigin

@CrossOrigin(origins = {"https://url.io", "localhost:3000"},
        allowedHeaders = {"POST", "GET", "PATCH"})

@CrossOrigin(origins = "localhost:3000", allowedHeaders = {"POST", "GET", "PATCH"})

2. WebMvcConfigurer implements

@RequiredArgsConstructor
@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("https://url.io", "http://localhost:3000")
                .allowedHeaders("*")
                .allowedMethods("*").maxAge(3600);
    }
}

 

그런데 만약 현재 프로젝트에 시큐리티 적용이 되어있는 상태라면, 다른 방식으로 해야 한다.

@RequiredArgsConstructor
@EnableWebSecurity
@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    private final OAuthUserService authUserService;
    private final OAuthSuccessHandler successHandler;
    private final OAuthFailureHandler failureHandler;
    
    @Override
    protected void configure(HttpSecurity http) throws Exception {
    http
    	.cors()
                    .configurationSource(corsConfigurationSource())
                    .and()
                .exceptionHandling()
                    .authenticationEntryPoint(new RestAuthenticationEntryPoint())
                    .and()
                .csrf().disable()
                .headers().frameOptions().disable()
                    .and()
                .formLogin().disable()
                .httpBasic().disable()
                .authorizeRequests()
                    .requestMatchers(CorsUtils::isPreFlightRequest).permitAll()
                .antMatchers("/favicon.ico", "/",
                        "/swagger*/**",
                        "/webjars/**",
                        "/**/*.css",
                        "/**/*.js",
                        "/**/*.html",
                        "/v2/api-docs/**",
                        "/oauth2/**"
                        )
                    .permitAll()
                .anyRequest().authenticated()
                .and()
                .oauth2Login()
                    .loginPage("http://career.cadet.42seoul.io:3000/")
                    .userInfoEndpoint()
                        .userService(authUserService)
                .and()
                    .successHandler(successHandler)
                    .failureHandler(failureHandler);
    }
    
    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.addAllowedOrigin("https://career.cadet.42seoul.io:3000");
        configuration.addAllowedOrigin("http://localhost:3000");
        configuration.addAllowedMethod("*");
        configuration.addAllowedHeader("*");
//        configuration.setAllowCredentials(true);
        configuration.setMaxAge(7200L);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }

}

@Bean 등록된 부분 코드에서 설정을 해주면 된다.

여기서 설정 주소를 등록하지 않으면 쿠키도 넘어가지 않는다.

---

class 설정을 했는데 CORS 설정이 적용되지 않는 경우,

설정 클래스에 @Configuration 어노테이션이 빠지지 않았는지 확인해보자!