[디버깅] CORS(Cross-Origin Resource Sharing) 오류

스프링 부트로 프로젝트를 하면서 API를 만들어 포스트맨 확인 후 넘겨드렸는데 CORS 오류가 발생했다는 얘기를 전해들었다. 해당 오류는 SOP 정책을 위반했을 때 발생하는 오류이며 SOP 정책은 다음과 같다.

 

SOP(Same Origin Policy) 정책

같은 호스트, 같은 포트, 같은 프로토콜에서만 요청을 주고받을 수 있는 보안 정책

스프링 부트에서 아무런 설정을 적용하지 않으면 위 SOP 정책을 그대로 따르게 된다고 한다.

 

그럼 SOP 정책을 어떻게 변경할 수 있을까?

해답은 CORS(Cross-Origin Resource Sharing)을 이용하면 된다고 한다.

CORS는 같은 호스트, 같은 포트, 같은 프로토콜이 아니더라도 요청을 주고 받을 수 있도록 해준다.

 

CORS를 적용하는 법

1. CORS 적용이 필요한 컨트롤러 위에 @CrossOrigin("*") 애노테이션을 추가한다.

2. WebMvcConfigurer 인터페이스를 상속받아서 설정한다.(스프링 시큐리티 사용 안할 시)

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins("http://localhost:3000");
    }

3. 스프링 시큐리티 설정 관련 config 파일에 아래 내용 추가 (스프링 시큐리티 사용할 시)

@Override
protected void configure(HttpSecurity httpSecurity) throws Exception {
    httpSecurity.cors().configurationSource(request -> {
        var cors = new CorsConfiguration();
        //허용할 주소
        cors.setAllowedOrigins(List.of("http://localhost:3000")); 
        //허용할 http 메소드
        cors.setAllowedMethods(List.of("GET","POST", "PUT", "DELETE", "OPTIONS"));
        //허용할 header
        cors.setAllowedHeaders(List.of("*"));
        return cors;
    });

 

필자는 스프링 시큐리티를 사용하고 있어서 3번으로 해결했다.

 

참고 사이트

https://velog.io/@minchae75/Spring-boot-CORS-%EC%A0%81%EC%9A%A9%ED%95%98%EA%B8%B0