하루 뒤 개발자 한승규입니다.

프론트 팀에서 CORS에러가 발생했다고 연락이 왔다.

항상 그냥 만들다가 나중에 추가하는 거 같은....

프로젝트를 할 때마다 항상 발생하는 CORS 에러이다...

이 CORS에러가 왜 발생하는지는 이 글을 읽는 사람들이라면 알고 있을 것이다.

간단하게 출처가 같지 않아서 발생하는 에러이다.

이전에는 CORS 에러가 발생할 때마다 항상 귀찮아서 컨트롤러 상단에

@CrossOrigin("*")

이렇게 Annotation을 추가했었다.

이 방법은 그냥 빠르게 임시 방편으로 사용했던 것 같고, 이번에는 이 에러를 초기에 한 번에 잡고 후에 NginX를 사용하면 이 구성을 뺄 수도 있기 때문에 Config를 만들어서 빼두었다.

방법은 어렵지 않았다.

우선 Configuration을 만들어두는 패키지에 당연히 이름은 상관없는 Configuration을 하나 만들고 WebMvcConfiguer를 implements한다.

@Configuration
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods("*")
                .maxAge(6000);
    }
}

그리고 이렇게 addCorsMappings를 Overide한다.

addMapping은 어느 URL에 적용을 할 것인가?

allowedOrigins는 어느 ip의 요청에 적용을 할 것인가?

allowedMethods는 어느 메소드를 허용 할 것인가?(Ex GET, POST)

maxAge는 캐싱의 시간이다.

어차피 현재 작성한 CorsMapping은 개발 단계에서만 사용 할 것이기 때문에 모두 와일드카드로 작성했다.

아마 후에 NginX로 설정을 옮길 것 같고 그 때가 된다면 다시 어떻게 적용했는지 적도록 하겠다.