안녕하세요!
이번 포스팅에서는 Open API를 사용해서 React 개발 시에 크롬 콘솔창에 자주 발생 하는 CORS 에러에 대해 알아보고자 합니다.
에러가 발생하는 원인과 해결 방안에 대해 정리 해 보겠습니다!🤔
개발 환경
- 저는 보통 토이 프로젝트를 개발 할 때
React와Open API를 주로 사용 해서 개발 합니다. 그런데 프로젝트를 실행 시키면 데이터를 요청 할 때 콘솔 창에 자꾸CORS라는 에러가 뜨게 되어 찾아보게 되었습니다.
👇🏻CORS 에러가 발생한 모습
원인
- 해당 이슈는
교차 출처 리소스 공유: CORS(Cross-Origin Resouce Sharing)이슈로 인한 문제 였습니다.
🔥CORS?
- CORS(Cross-Origin Resouce Sharing) 는 클라이언트와 서버 포트가 다른 상태에서 클라이언트 측에서 서버 측으로 무언가를 요청했을 때 브라우저가 보안상의 이슈로 요청을 차단하는 문제 입니다. 예를 들어 클라이언트 측의 포트가 3000이고 서버측의 포트가 8000이라면 보안상의 이유로 차단 됩니다.
- React 프로젝트를 예를 들어 보면 기본 포트인
localhost:3000의 요청으로 3000번 포트가 실행 되고, 요청 하는 서버측 과는 포트가 다르기 때문에 발생한 에러 입니다.
해결 방안
- 구글링을 통해 찾은 여러 방안 중에서, 실제로 적용해 본
Proxy를 이용한 해결 방안에 대해 소개해 드리겠습니다. 프록시 설정을 통해CORS이슈를 제거해 보겠습니다.
⭐️Proxy?
- 프록시(Proxy) 란, ‘대리’라는 의미로 네트워크 기술에서는 프로토콜에 있어서 대리 응답 등에서 친숙한 개념 입니다. 보안 분야에서는 주로 보안상의 이유로 직접 통신할 수 없는 두 점 사이에서 통신을 할 경우 그 사이에 있어서 중계기로서 대리로 통신을 수행하는 기능을 가리켜
프록시, 그 중계 기능을 하는 것을프록시 서버라고 부릅니다. -
Proxy 사용 목적?
- 보안을 위해 익명으로 컴퓨터를 유지
- 바이러스 전파, 악성 루머 전파, 다른 정보들을 빼낼 목적으로
- 네트워크 서비스나 콘텐츠로의 접근 정책을 적용하기 위해
- 캐쉬를 이용해 리소스로의 접근을 빠르게 하기 위해 (웹 프록시는 웹 서버로부터 캐시로 저장하는데 흔히 쓰입니다.)
CORS를 해결 해보자!
- 자신의 React 프로젝트에서
package.json파일에proxy를 추가해 줍니다. - 프록시를 추가 할 때는 서버에 요청할 주소를 입력합니다. fetch를 함수를 사용해서 해당 주소로 요청을 보낼 거라서 데이터 센터의 주소를 입력 했습니다.
👇🏻package.json에 Proxy를 추가한 모습
- 프록시 주소를 추가한 이후에는 프로젝트를 다시 실행 시켜서 콘솔 창에
CORS에러가 해결 되었는지 확인 합니다! - 프록시 주소를 설정하고 나서 fetch 함수를 사용 할 때는,
url호출 만으로 요청이 가능합니다.
👇🏻fetch 함수 사용 방법
오늘 준비한 내용은 여기까지 입니다.
이번 포스팅이 도움이 되셨거나 궁금한 점이 있으시다면 언제든지 댓글을 달아주세요!🙋🏻♀️✨