[Spring] CORS 문제 해결

CORS Error

CORS(Cross-Origin Resource Sharing) 정책은 웹 애플리케이션이 다른 도메인에서 리소스를 요청할 때, 이를 허용하거나 차단하는 방식으로 동작하는 보안 기능입니다. CORS는 보안상의 이유로 기본적으로 다른 출처에서의 요청을 제한하는 Same-Origin Policy(동일 출처 정책)을 우회할 수 있도록 해줍니다. CORS 에러란 간단히 말해 request, response 의 url, 포트 가 동일하지 않았을 때 발생한다.

에러 상황

• spring 프로젝트를 ec2 서버에 배포된 상황에서 프론트엔트 작업자가 local 에서 요청을 보냈을때 에러가 발생했다.
  (프론트 : localhost:3000, 서버 : [ec2 server]:8081)
• WebConfig 파일을 수정하고 Postman 을 통해 Header 부분을 변경해 테스트 했지만 CORS 에러는 발생하지 않았다. (Postman 에서는 CORS 에러를 발생시키지 않는다 <- ?)

해결 방법

프론트가 테스트 하는 ip 와 포트를 허용해 주어야 한다.
하지만 프론트엔드가 테스트 하는 IP 주소가 일정하지 않으므로 개발이 완전히 마무리 되기 전까지 모든 IP 요청을 허용하는 것으로 결정했다.

package ranking.project.config;

import org.springframework.boot.web.servlet.FilterRegistrationBean;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/api/**") *//* *모든 경로에 대해*
                .allowedOrigins("https://localhost:3000", "http://localhost:3000")
                .allowedHeaders("*")
                .allowedMethods(HttpMethod.GET.name(), HttpMethod.POST.name()) *//* *허용할* *HTTP* *메소드 목록*
                .allowCredentials(true)
                .maxAge(3000);
    }

    @Bean
    public FilterRegistrationBean<CorsFilter> corsFilterRegistrationBean() {

        CorsConfiguration config = new CorsConfiguration();
        config.setAllowCredentials(false);
        config.addAllowedOrigin("*");
        config.addAllowedHeader("*");
        config.addAllowedMethod(HttpMethod.GET);
        config.addAllowedMethod(HttpMethod.POST);
        config.setMaxAge(6000L);
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        source.registerCorsConfiguration("/**", config);
        FilterRegistrationBean<CorsFilter> filterBean = new FilterRegistrationBean<>(new CorsFilter(source));
        filterBean.setOrder(0);
        return filterBean;
    }
}

CORS 테스트 방법

curl --verbose --request OPTIONS \
'http://[ec2 server]:8081' (서버) \
--header 'Origin: http://localhost:3000' (클라이언트) \
--header 'Access-Control-Request-Headers: Origin, Accept, Content-Type' \
--header 'Access-Control-Request-Method: GET'

405 또는 403 반환이면 CORS 허용 설정이 잘 안된 것