Spring MVC에서 CORS를 설정했는데, 왜 put, delete 요청에서 CORS에러가 날까요?

안녕하세요. 졸린 개발자입니다.

 

오늘은 Spring MVC에서 CORS를 설정하는 도중,

만났었던 오류를 소개해 드리고, 해결방법을 알려드리려 포스트를 씁니다.

 

프로젝트를 진행중,

front-end의 origin에 CORS를 허용해주기 위해,

Spring에서 cors설정을 해주었습니다.

 

하지만, front-end개발자 분들은 여전히 CORS문제를 겪으셨고,

저는 GET요청을 하는 API조회가 잘 되는지 여쭤보니,

그건 또 잘 된다고 하였습니다.

 

저는 여기서 문제의 원인을 짐작할 수 있었습니다.

 

 

원인

Spring MVC에서 Global cors의 default설정은, GET, HEAD, POST만 지원합니다.

<그림1 globalCorsConfiguration>

 

그래서 PUT과 DELETE요청은 CORS에러가 나오는 것이죠.

 

 

실제 CORS헤더

그럼 Spring은 어떻게 default로 GET, HEAD, POST만을 지원할까요?

 

답은 CORS 응답헤더에 있습니다.

<그림2 Access-Control-Allow-Method>

CORS 응답헤더에는 이러한 헤더값이 있고,

Spring은 기본적으로 이 헤더값에 GET, HEAD, POST만을 허용하기 때문에, 다른 값을 넣어주지 않아,

인터넷 브라우저에서 CORS에러를 발생시키는 것입니다.

 

 

해결방법

간단합니다. 이러한 allow method에 대해 put, delete에 대해 Http Method를 허용해 주면 되는 것이죠.

 

설정 자체는 간단합니다.

<그림3 webConfig>

 

만약 여러분이 CORS설정을 하셨다면,

addMapping과 allowedOrigins까지는 설정이 되있을 겁니다.

 

추가적으로 allowedMethod에

기본적으로 적용해줘야할 GET, HEAD, POST를 추가하고

추가적으로 PUT과 DELETE를 추가해주면 됩니다.

 

 

결론

사실 해결책 자체는 코드 몇줄만 추가하면 되지만,

 

CORS가 어떻게 작동하는지에 대해 알아야하기 때문에

배경지식이 상당히 많이 필요합니다.

 

현대 웹 어플리케이션은 

백엔드와 프런트엔드가 다른 도메인에서 작동하는 경우가 대부분입니다.

 

그래서 CORS문제는 상당히 많이 접하는 에러이므로,

CORS에 대해 이해는 필수적이라고 볼 수 있습니다.

 

MDN에 좋은 글이 있으니, 참고하시어 공부하는데 도움이 되길 바랍니다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN