CORS 설정시 PUT, DELETE 요청하면 OPTIONS 403에러가 나는 경우

백엔드 API 구현한 뒤 다음과 같이 CORS 전역 설정을 하였는데 오류가 났었습니다. 게시글 조회, 등록의 경우 CORS 설정이 잘 되었으나 게시글 수정, 삭제할 때 CORS 설정이 적용이 안되서 OPTIONS 403 에러가 났었습니다.

@Configuration
public class CorsConfig implements WebMvcConfigurer {

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

---

해결 방법

오버라이딩한 메소드 addCorsMappings의 인자값 CorsRegistry를 보면 다음 메소드를 볼 수 있습니다.

그래서 Map의 값으로 주어진 CorsConfiguration을 보면 허용되는 Method의 디폴트 값이 GET, HEAD, POST로 되어 있는 것을 알 수 있습니다. 그래서 게시글 수정(PUT), 삭제(DELETE)할 때 CORS 설정을 적용해주려면 따로 추가해줘야만 합니다.

코드

@Configuration
public class CorsConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
                .allowedOrigins("*")
                .allowedMethods(
                        HttpMethod.GET.name(),
                        HttpMethod.HEAD.name(),
                        HttpMethod.POST.name(),
                        HttpMethod.PUT.name(),
                        HttpMethod.DELETE.name());
    }
}