[React + Spring] 회원가입 CORS 에러해결

CORS 에러 발생

프로젝트 구현 중에 회원가입에 필요한 이메일 인증을 구현하는 부분에서 React 프론트에서 Spring 백엔드로 HTTP 요청 시 CORS 에러가 발생했다.

 

CORS(Cross-Origin Resource Sharing)는 서로 다른 Origin에서 요청을 주고 받을 시 문제가 된다.

 

React의 서버가 http://localhost:3000이고 Spring 서버가 http://localhost:8080이라면 서로의 포트번호가 달라서 CORS 이슈가 발생하는 것이다.

 

처음 겪는 에러라서 하루종일 골치 아팠는데.. 해결했던 방법을 기록 하려고 한다.

 

---

사용한 해결 방법

1. Spring 서버에서 CORS 허용 설정 추가

configuration.setAllowCredentials(true)를 추가하여 API 요청에 대해 CORS를 허용하도록 설정

2. React에서 요청을 할때 설정

프론트에서 요청을 할 때 withCredentials를 true로 header에 담아서 요청

---

위와 같이 하여 문제를 해결하였다!