Spring React간 CORS 이슈 트러블슈팅(WebMvcConfigurer)
Spring React간 CORS 이슈 트러블슈팅 백엔드 Spring, 프론트엔드 React로 풀스택 개발 중, CORS에러를 마주하여 이에 대한 트러블슈팅 기록을 남겨둔다. 기존에는 React를 빌드한 결과물을 Spring의 경로에 넣고 Spring서버를 실행하면 별 다른 이슈가 발생하지 않았는데,
이번에 React와 Spring을 서로 다른 포트에서 개방할 경우, CORS에러가 발생한다. CORS란? Cross-Origin-Resource-Sharing의 약자로 서로 다른 출처에서 리소스를 공유하는 것을 뜻한다. React클라이언트의 경우, GET방식으로 API를 요청할때 다음과 같은 URL을 사용한다.(포트 3000)
이 URL에서 Origin을 나타내는 부분은 Protocol, Host, Port 부분이다. 즉, 과 은 서로 다른 Origin으로 구분된다. 만약 localhost로 테스트한다고 하면, , 은 서로 다른 origin이다. 스프링부트 서버에 http://lo…