CORS 트러블슈팅 - PUT, DELETE 요청

문제 발생

프론트엔드 공부를 하면서 스프링 서버로 CORS 관려해서 이것저것 연습해봐서

이제 CORS에 관해서는 어느정도 잘 알고 있다고 생각했고 나름 자부하고 있었다.

솔직히 아래 설정만 하면 웬만한 CORS 설정은 다 끝나는줄 알았다.

또한 팀 프로젝트 기간 중 그동안 API를 만들어두고 프론트 측에서 아무 말도 없길래 문제 없다고 생각했다.

하지만 갑자기 CORS 문제가 생기는 이슈가 발생했다.

WebMvcConfigurer

@Configuration
@RequiredArgsConstructor
public class WebMvcConfig implements WebMvcConfigurer {

    private final AppConfig appConfig;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins(appConfig.getFrontTestUrl(), appConfig.getFrontDeployUrl(), appConfig.getBackUrl())
            .allowCredentials(true);
    }
}

---

문제 해결

사실 결론만 보자면 별거는 없었다.

기본적으로 allowedMethods는 GET, POST 요청만 허용하고 있기 때문이었다.

프론트에서도 기존 만들어둔것 중 GET, POST 요청만 이용했었기에 별 다른 이슈가 없었던 것이다.

그래서 PUT 요청을 하면서부터 문제가 생기기 시작했다.

연습할 때도 PUT 요청까지 연습해보지 않고 GET, POST로만 연습했기 때문에 처음 겪어봤던 것이다.

따라서 아래처럼 PUT, DELETE 요청도 허용하게끔 설정하면 문제 없이 해결되었다.

WebMvcConfigurer

@Configuration
@RequiredArgsConstructor
public class WebMvcConfig implements WebMvcConfigurer {

    private final AppConfig appConfig;

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")
            .allowedOrigins(appConfig.getFrontTestUrl(), appConfig.getFrontDeployUrl(), appConfig.getBackUrl())
            .allowedMethods("GET", "POST", "PUT", "DELETE")
            .allowCredentials(true);
    }
}