✅ Info: CORS 처리 방법론

[moneyless1989]

프론트엔드에서 백엔드에 API를 요청하기 위하여 주로 fetch()를 사용하게 되는데,
API를 요청한 프론트엔드가 돌아가는 호스트와 - React: 3000
API가 신호를 보내는 백엔드의 호스트 주소가 서로 다를 경우 - Tomcat: 8080
웹 브라우저에서 CORS(Cross-Origin Resource Sharing, 리소스 출처 불일치) 오류를 띄우면서 데이터를 받지 않는다.

이를 해결하기 위한 방법이 여러 가지가 있다.

1. WebFilter로 직접 Response에 CORS 관련 헤더 추가
2. API 컨트롤러에 @CrossOrigin 어노테이션 추가
3. WebMvcConfigurer에서 전역 범위로 설정

...

이후에 추가 예정

[jaynamm]

추가로 React package.json 파일 안에 proxy 를 추가해서 해결하는 방법도 있는 것으로 확인됨

예를 들어 아래와 같이 설정하게 되면

proxy localhost:8080

React localhost:3000 에서 API 를 요청하게 되면 프록시를 통해 Spring Boot localhost:8080 으로 API 가 전달됨

Frontend 에서 처리해주거나
아니면 Backend 에서 처리해줄지 찾아보고 정리할 필요가 있음