안녕하세요. 민 입니다. 오늘은 3주만에 포스팅으로 돌아왔습니다. !! 😂
프로젝트 준비 중이라 프로젝트를 진행하며 알게 된 내용은 많지만 작성할 시간이 없었네요. 오늘은 Frontend와 Backend에서 많이 사용하게 되는 Proxy서버와
CORS 에러에 대해서 알아볼 것 입니다. !
일단 둘을 사용하는 이유에 대해서 알아야겠죠 ??
실제 예시와 함께 사용하는 이유에 대해 알아보러 가겠습니다.
목차
1. Proxy 사용이유
2. 결론
(1) 💁 Proxy 사용이유
여러분들은 개발을 진행하면서 프레임워크를 어떤 것을 사용하시나요 ?? 현재 저는 프로젝트를 진행하며 Front로는 React, Back으로는 SpringBoot를 사용하고 있는데요 둘의 기본적인 server의 port 번호가 다릅니다.
React ➡️ 3000
SpringBoot ➡️ 8080
서버 포트가 다르다면 브라우저에서 이 둘을 연동해주는 과정이 필요한데 이 과정에서 CORS 에러가 발생합니다 .
(1-1) 💁♂️ CORS
CORS의 사전적인 뜻 ➡️
> Cors (Corss-origin Resource Sharing) Policy ?
교차 출처 리소스 공유라는 기능으로 실행중인 웹 애플리케이션이 서로 다른 출처의 리소스에 request할때
보안상의 이유로 교차 출처 HTTP 요청을 제한하는 것이다.쉽게 말씀드리면
요청을 받게되는 정보의 출처(현재는 3000)와 전송하는 정보(8080)의 출처가 다를경우 보안상의 이유로 제한하는 것 입니다.
그렇다면 현재까지의 내용은 둘을 연동해서 개발을 하려고하는데 서버의 포트번호가 다르기 때문에 연동하는 과정이 필요하고 , 그 과정에서 CORS가 발생할 수 있다는 것으로 이야기 할 수 있습니다.
그렇다면 연동하는 과정에 대해서 확인하러 가시죠 !
Proxy를 이용하지 않을경우
Proxy를 이용하지 않을 경우 다음과 같은 순서를 따릅니다.
1.클라이언트의 요청이 들어올경우 Front에서 Browser로 요청을 보낸다.
2.Broswer에서 Back으로 접근 권한을 확인한다.(서버의 출처(포트번호) 가 동일한 지
3. Back에서 Broswer로 응답을 보낸다
4.출처가 다를경우 브라우저에서 응답을 파기한다 .
-> 기본적으로 3000번과 8080이 다르기 때문에 오류가 발생할 수 밖에 없는 구조 인 것 입니다. Proxy는 이러한 문제를 우회해서 해결할 수 있습니다
Proxy를 이용
Proxy를 이용할 경우 다음과 같은 순서를 따릅니다.
1.클라이언트의 요청이 들어올 경우 Front에서 Broswer로 요청을 보낸다(여기까지 동일)
2.Proxy를 통해 Front에서 Back으로 우회해서 정보를 요청한다.
3.Proxy를 통해 Back에서 Front로 우회해서 정보를 응답한다.
4.기존에 Back에서 Broswer로 응답했던것과 달리 Front에서 브라우저로 요청을 전송해준다 .
🥸 한 마디로 요약하자면 Proxy를 활용하여 출처를 동일시켜주기 때문에 CORS가 발생하지 않는 것 입니다 !
😊 결론
1.요청하는 서버의 출처와 정보를 제공하는 쪽의 출처가 다르다면 보안상의 이유로 CORS 에러가 발생한다 .
.
2.에러를 해결하기 위해 Proxy서버를 사용한다 .
.
3.Proxy서버를 사용하면 우회하여 정보를 보내기 때문에 출처를 일치시킬 수 있다. ( 브라우저가 눈치채지 못 하도록)
프록시를 사용하지 않는 버전 (React -> Browser <-> Spring Boot): 출처가 다름
프록시를 사용하는 버전 (React -> Browser -> React <-> Spring Boot): -> 출처가 React로 동일
🏃♂️🏃♂️🏃♂️ 끝!!
