스프링 부트 CORS (Spring Boot CORS )

개발을 하던 중 만난 CORS(Cross-Origin Resource Sharing): 교차 출처 자원 공유 에러를 해결한 방법을 공유하겠습니다. 

 

CORS(Cross-Origin Resource Sharing)이란

---

• 동일한 출처(최초 자원이 서비스된 출처)가 아니여도 다른 출처에서의 자원을 요청하여 쓸 수 있게 허용하는 구조를 뜻한다.
• 보통 보안상의 이슈(DOM을 통한 취약한 데이터 접근 시도) 대문에 동일 출처 원칙을 기본적으로 웹에서는 준수하게 됩니다. 따라서 최초 자원을 요청한 출처 말고 다른 곳으로 스크립트를 통해 자원을 요청하는 것은 금지됩니다.
• CORS를 적용하려면 웹 어플리케이션과 서버 어플리케이션에서 그에 따른 처리를 해줘야 합니다.

 

@CrossOrigin

---

기존 소스

@RestController
public class TestController {
    @GetMapping("/test")
    public String test(){
        return "This is Test";
    }
}

적용 소스

@RestController
public class TestController {

    @CrossOrigin(origins="http://localhost:3000")
    @GetMapping("/test")
    public String test(){
        return "This is Test";
    }
}

@CrossOrigin(origins="http://localhost:3000") 어노테이션을 통해 출처를 밝히고 예외로 허용시켜줌.

 

WebConfig

---

위의 @CrossOrigin 어노테이션을 사용하는 방법 이외에도 요청을 Controller에 전달 전에 가로채 출처를 허용하게 해주는 방법이 있습니다. 이는 메소드 마다 요청이 상이할 경우나, 각기 다른 web 어플리케이션에 자원을 공유하는 경우 적당하지 않습니다. 

 

Controller 소스

@RestController
public class SampleController {

    @GetMapping("/test")
    public String test(){
        return "test";
    }
}

Webconfig 소스

@Configuration
public class WebConfig implements WebMvcConfigurer {

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

WebConfig 클래스를 Application 클래스와 동일한 폴더에 생성해 작성합니다.

이렇게 되면 모든 맵핑 시도중 3000 port만 교차 출처를 허용하게 되고 자원을 사용할 수 있게 됩니다.