Enabling Cross Origin Requests for a RESTful Web Service

https://spring.io/guides/gs/rest-service-cors/

한줄 요약

fun(api)에 대해서 Cross Origin을 허가해주기 위한 설정법을 익힌다.

핵심 코드

우선 gradle 파일에 testImplementation ("org.apache.httpcomponents:httpclient")을 추가해준다.

그리고 실제 적용하는 코드 자체는 간단하며 두가지 방식이 있다.

1. method에 직접 annotation으로 등록하기

@CrossOrigin 의 origins parameter를 통해 허용해주고자 하는 주소를 추가해주면 된다.

## GreetingController.kt
// 컨트롤러 전체 코드가 아닌 해당 method만의 코드
@CrossOrigin(origins = ["http://localhost:8080"])
    @GetMapping("/greeting")
    fun greeting(
            @RequestParam(required = false, defaultValue = "World") name: String
    ): Greeting {
        println("====== get greeting ======")
        return Greeting(String.format(template, name))
    }

2. global하게 setting 하기

전역적인 방법으로는 WebMVCConfigurer를 custom 하게 구현하는 것이다. 이 interface 내부에 있는 addCorsMappings method를 override해서 특정 mapping에 특정 origin을 허가해줄 수 있다.

## GreetingController.kt
// 컨트롤러 전체 코드가 아닌 해당 method만의 코드
@GetMapping("/greeting-javaconfig")
    fun greetingWithJavaconfig(
            @RequestParam(required = false, defaultValue = "World") name: String
    ): Greeting {
        println("====== get greeting ======")
        return Greeting(String.format(template, name))
    }
    
## CorsConfig.kt
@Configuration
class CorsConfig: WebMvcConfigurer {
    override fun addCorsMappings(registry: CorsRegistry) {
        registry.addMapping("/greeting-javaconfig")
                .allowedOrigins("http://localhost:8080")
    }
}

Test

사실 Test를 직접 해보는 것에 실패했다. 조금은 귀찮음이라고 하는게 솔직한 표현인 것 같기는 하다. 왠지 모르겠지만 guide에서 알려주는 방식이 아닌 내가 직접 여러 방식으로 test해보는데 다 되버린다. localhost가 가지는 모종의 connection인가 싶기도 하고 어디서 무엇이 연결되어 있길래 되는가... 싶기도 하다. 그래서 그냥 이번 guide를 통해서는 CORS issue를 해결해야하는 시점이 왔을 때 이렇게 하면 된다~ 정도를 얻어간다.

마치며

CORS에 대한 개념이 없던 사람이라면 되게 이게 왜지 싶을 수도 있지만, 나는 일전에 회사 인턴시절 django와 vue를 연결하면서 CORS 문제로 매우 골치가 아팠던 기억이 있어, 좀 더 중요한 내용으로 다가왔다.(코드 자체는 매우 간단했지만...) 실제로 확인을 해보지 못한 부분이 있기는 하나, 직접 마주했을 때 어떤식으로 해결하고 설정해야 할지를 알아갔다는 것에서 긍정적이라고 생각한다. 또 이번 코드에 등장했던 WebMVCConfigurer가 후에 열심히 공부해야 할 대상이 될 것 같다는 느낌이 빡 왔다. 딱 봐도 여러 설정을 이를 통해 진행해야 할 것 같아서 키워드를 머리속에 딱 기억해두고 간다.
볼 것은 없지만 코드는 여기서 확인할 수 있다.