🤬 CORS? 그게 뭔데 !

첫 만남.. 😔

    - 리액트를 사용한 프로젝트를 만들어보고자 하였고 코로나 관련 API를 사용하기로 하였다.

두곳의 API를 사용하기로 하였고 그중 국내 현황은 굿바이코로나 에서 키를 발급받고 postman에 테스트를 해보았다.

국내 코로나 토탈 데이터로드

도시별 코로나 데이터 로드

    - postman으로 데이터가 들어오는것을 확인하고 react에서 axios를 이용하여 데이터를 불러보았다.

기쁜맘으로 데이터 로드를 시도!

에러가 없길 기원하며..

    - 하지만 항상 그렇듯 쉽게 되는일은 없는것 같다.

sigh..

CORS (Cross-Origin Resource Sharing) Policy?

    - 교차 출처 리소스 공유라는 기능으로 실행중인 웹 어플리케이션이 서로 다른 출처의 리소스에 request할 때

보안상의 이유로 교차 출처 HTTP 요청을 제한하는 것이다.

https://developer.mozilla.org/ko/docs/Web/HTTP/CORS

교차 출처 리소스 공유 (CORS) - HTTP | MDN

예를들어 리액트 서버는 http://localhost:3000 노드 서버는 http://localhost:5000 으로 실행될 경우

브라우저는 각기 다른 서버(리액트, 노드)에 요청을 하게되는데 이때 CORS 정책의 이유로 ERROR가 발생한다.

✨ 해결방안

    - 현재엔 API를 요청하는 서버와의 문제인듯 하였다. CORS 관련문제를 해결하는방법은 몇가지가 있는듯 하나

proxy를 두어 처리하기로 하였다.

😍 프록시(Proxy)

    - 프록시(Proxy)는 "대신"이라는 사전적의미를 가지고있으며 프로토콜에서 대리응답등에서 사용하는 개념이다.

프록시를 이용하여 중계를 하는 개념이다.

클라이언트의 브라우저는 직접 앱서버가아닌 프록시서버와 주고받게 된다.

    - 브라우저가 각기 다른서버에 요청을 하게하는 대신 브라우저는 리액트서버에만 요청을하게하고 리액트서버가

앱 서버에 요청을 하고 그 응답을 리액트서버에서 받아서 다시 브라우저에 보내는 방식인셈이다. 

🔦 Proxy 설정 방법

    - 설정방법엔 두가지가 있는것 같다.

        1) http-proxy-middleware

        2) package.json에 proxy추가 (create-react-app으로 프로젝트를 생성한 경우)

http-proxy-middleware의 방법이 궁금하다면 ?

React - (CORS / http-proxy-middleware)

    - 위의 두가지 방법중 후자를 선택하였고 방법은 간단하다.

프로젝트 파일의 package.json에 "proxy" 를 추가해준다.

    - package.json에 "proxy" : "앱서버도메인" 을 추가해주면 되고 이경우엔 API도메인을 넣어주었다.

추가적으로 axios url주소를 변경해준다.

    - 이후 요청 url을 로컬에서 사용하듯 proxy 주소를 제외한 뒤의 path와 query등만 입력해준다.

변경후 확인해보니 정상적으로 데이터를 받아오는것을 확인할 수 있다.