[React] Proxy 설정하기

보통 개발환경의 주소는 http://localhost:3000을 사용한다.

Api 서버의 주소가 https://dev-api.com 일때, 따로 cors 설정을 해놓지 않는다면, cors 에러가 난다.

CORS

일반적으로 브라우저는 보안 문제상의 이유로 동일 출처 정책(SOP)을 따른다.

요청 URL과 응답 URL 두 URL의 프로토콜, 호스트, 포트가 모두 같아야 동일 출처로 볼 수 있다.
출처가 다른 호스트로 데이터를 요청하는 경우 CORS 정책을 위반하게 된다.

예를 들어 a-url.com 페이지에서는 b.url.com 호스트로 데이터를 요청할 수 없다.

proxy

proxy는 웹팩 개발서버로, proxy를 통해 브라우저에서 API 를 요청 할 때 백엔드 서버에 직접적으로 요청을 하지 않고, 현재 개발서버의 주소로 요청할 수 있다.

proxy 구축하기

SPA에서는 proxy를 사용해 CORS 정책을 우회할 수 있다.

브라우저는 리액트 애플리케이션으로 데이터를 요청하고, 리액트는 해당 요청을 백엔드로 전달한다. 이후 리액트가 백엔드로부터 받은 응답 데이터를 다시 브라우저로 재전달 하므로 브라우저는 CORS정책을 위배했는지 모른다.😏

 

CRA(create-react-app)로 react 어플리케이션을 만들고 있다면,
이미 설치되어 있는 react-scripts로 간단하게 proxy설정을 해줄 수 있다.

 

package.json 파일 안에

{
“proxy” :  “localhost:8080”  
}

다음과 같이 proxy와 요청 url을 적어주면 된다.

 

참고 : https://junhyunny.github.io/information/react/react-proxy/

https://react.vlpt.us/redux-middleware/09-cors-and-proxy.html