Spring Boot CORS 문제 해결하기

브라우저에서 API서버와 통신 중에 다음과 같은 메세지가 발생하였습니다.

Access to XMLHttpRequest at '...' from origin
'http://localhost:3000' has been blocked by CORS policy: Response to preflight
request doesn't pass access control check: No 'Access-Control-Allow-Origin' header
is present on the requested resource.

same origin policy에 의해서 프로토콜, 포트번호, 호스트가 다르면 요청에 대한 응답을 브라우저에서 받을 수 없었습니다.

서로 다른 origin간에도 요청을 주고받을 수 있도록 한 것이 CORS(Cross origin resource sharing)입니다.

 

다음과 같은 config파일을 작성해줍니다.

@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("http://localhost:3000")
                .allowedMethods("*") // 기타 설정
                .allowedHeaders("*");
    }
}

로컬에서 개발 중이므로 현재 프론트에 해당하는 주소를 적어주었습니다.

​

스프링 시큐리티를 사용 중일 경우, 스프링과 별개로 cors 설정을 해주어야합니다.

@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .cors().and() // security cors 허용
                ...
    }
}

스프링 시큐리티에서는 cors를 허용해주고, 스프링에서 cors설정을 해주었습니다.

​

스프링 시큐리티에서도 cors 설정을 하려면 다음과 같이 진행하면 됩니다.

@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .cors().and() // security cors 허용
             ...
    }

    @Bean
    public CorsConfigurationSource corsConfigurationSource() {
        final CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowedOrigins(List.of("http://localhost:3000"));
        configuration.addAllowedHeader("*");
        configuration.addAllowedMethod("*");
        configuration.setAllowCredentials(true);

        final UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", configuration);
        return source;
    }
}