리액트 Vite Proxy 활용한 CORS 오류 해결

🤷‍♂️ 본론에 앞서

---

프론트엔드 번들러 개념과 webpack vs vite 비교에 대해서 공부를 하고 글을 보시면 더 많은 도움이 됩니다^^

프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교

https://cometruedream.tistory.com/224

프론트엔드 개발을 위한 번들러 개념과 webpack vs vite 비교

 

🤷‍♂️ 로컬 개발 환경 CORS 오류?

---

프론트 개발을 하다 보면 로컬 환경에서 API CORS 오류가 빈번히 발생한다.

Vite 개발 환경에서 Proxy를 사용하여 CORS 오류를 해결하고 클라이언트와 서버가 같은 도메인 출처가 아니더라도 원활하게 API 통신을 할 수 있는 방법을 알아보겠습니다.

 

CORS 오류가 발생하는 이유?

• 클라이언트와 서버가 동일한 ORIGIN이 아닐 경우 CORS 500 에러가 발생한다.
• URL 구조를 보면 protocol, host, port 적혀있지만 이 부분이 다르게 요청이 들어가면 CORS 에러가 발생한다.

 

URL 대해서 분석 & 이해 알아보기

https://cometruedream.tistory.com/43

URL 대해서 분석 & 이해

 

 

 

🤷‍♂️ CORS 오류 해결 방법 

---

기본적으로 CORS 오류 해결은 백엔드에서 처리해주는 것이 좋은 방법이다.

백엔드에서 바로 처리가 안 되는 경우 프론트에서도 임시방편으로 CORS 오류를 해결할 수 있는 방법이 있다.

 

Proxy 설정

Proxy란?

• Proxy는 API로 네트워크 요청 & 응답을 주고 받는 client와 server 사이를 중계하는 중간자 역할이다.
• Proxy 설정을 한다면 요청을 날릴 때 origin을 바꿔서 server 보낼 수 있어서 cors 오류를 해결한다.
• 클라이언트 쪽에서 Proxy 수정하는 것을 포워드 Proxy라고 한다 (서버단에서 Proxy 설정은 리버스 Proxy라고 한다.).

 

 

Proxy 설정 방법

vite.config.json 파일에 Server 안에 proxy 옵션을 설정한다.

 

 

• env 파일로 API URL 설정
• /api 앞 부분인 origin을 target에 설정되어 있는 부분으로 바꿔 준다는 의미

 

아래의 그림으로 Proxy 프로세스를 볼 수 있다.

 

1. vite.config.json 파일에 설정한 URL /api 프록시 설정이 적용된다.
2. 프록시 rewrite 함수를 통해 /api 부분을 삭제하고 /auth/login/email 변경한다.
3. changeOrigin 옵션으로 HTTP 요청 헤더의 Host 값을 target 주소로 변경한다.
4. 같은 도메인이 출처를 proxy 서버로 보내고 proxy는 위에서 설명했듯이 클라이언트와 서버와의 중간 중계자 역할을 하기 때문에 Proxy 서버에서 target 주소로 API 통신을 한다.
5. 최종적으로 CORS 오류를 우회하는 방법이다.

 

설정한 Proxy API 사용 방법

 

🤷‍♂️ 정리하자면…

---

프론트에서 포워드 Proxy를 사용하여 CORS를 회피해 보았고 vite의 옵션을 활용해서 CORS 오류를 해결해 보았다.

바람직한 방법은 백엔드에서 처리해 주는 것이지만 임시방편으로 테스트를 위해서 프론트에서 Proxy 우회하는 방법을 사용할 수 있다. 

 

---

 

재밌는 오늘의 띠별 운세 보고 가세요!