React와 Spring Boot 연동

문제 발생 ! !

팀 프로젝트로 프론트 개발자로 웹 제작에 관련된 작업중에
담당한 파트에 기능 제작을 완료해서 테스트를 위해 백엔드 측에 코드를 요청했었다.

하지만, 아직 완성이 되지 않아 여유롭게 디자인 작업을 하던 와중,
이대로 있으면 안되겠다 싶어서 대충 간단한 테스트 코드라도 내가 만들어서 해보자 하며 백엔드 테스트코드 제작에 무턱대고 돌입했다.

인터넷 서칭과 유튜브, 인프런 등의 영상들을 보며 우여곡절 끝에 아주 같단한 코드를 완성했다.
기뻐하며, axios를 사용해 통신을 시작했는데..

나오지가 않아, 콘솔창을 띄워보니.. 덜컥! 불길한 빨간색이 보였다.
여태 프로젝트를 작업한 경험도 적고, 대부분 백엔드 측에서 완벽하게 해줬기 때문에 이런 코드들을 구경할 새가 없었기에

매우 당황했다!!

바로 에러부분을 검색에 들어갔는데 CORS 오류라고 하더라,
단순한 통신오류나 코드오류인줄 알고 시간을 허비한건 비밀이다.

Cross-Origin Resource Sharing
바로 리소스의 출처가 다르기 때문에 발생한 오류였다.
(보안정책으로 인해 걸리는 오류)

• 귀찮긴 하지만, 보안 때문이니까 ..! 실제로 우리들도 도움을 많이 받는다고 한다.

React는 loacalhost:3000,
Spring Boot는 localhost:8080 을 사용하고 있었기에 바로 이해가 가능했다.

출처 : [테크연]

여기서 말하는 출처는 protocol + host + port 까지의 주소를 의미한다.
즉, 이 주소가 다르기 때문에 발생한 것이다.

그럼.. 어떻게 해결해?

출처에 관한 비교와 차단은 서버가 아닌 브라우저에서 진행된다.
따라서, 브라우저에게 이건 막지 말아라~ 하고 전달해주면 에러가 발생되지 않는다는 뜻!

방법은 여러가지가 있었다.

스프링부트의 Application에 CORS 설정 하는 방법 (localhost:포트번호)

React의 package.json에 proxy 설정을 해주는 방법 (localhost:포트번호)

위의 방법으로 해결 완료 !!

덜 불편한 코딩 생활, 진취적인 코드를 위하여 !!!