(react) proxy 서버와 ajax요청 (fetch 또는 axios)

필자가 접한 react 튜토리얼을 보면

리액트의 프톤트에서 백엔드로 요청을 할때

중간에  proxy서버를 두고 요청한다.

"proxy": "http://localhost:7080",   //package.json

처음에는 단순히 리액트는 3000에 실행되어있고

서버의 경우 7080포트(필자의 백엔드 서버)에 실행되어있으니

CORS( cross-origin requests)를 방지하기 위함인줄 알고 개발을 진행했다. 

 cors는 웹개발시 무조건 만나는 기초 내용이니 검색해보자!

 

* 간단하게 추가 설명을 보태면 3000에서 실행된 리액트가 보낸 요청을 프록시 서버인 7080이 가로챈 뒤 백엔드서버인 7080으로 요청을 보내기 때문에 CORS가 발생하지 않는다.

 

 

허나 한가지 이유가 더있다.

axios.get('http://localhost:3001/users?email=${email}')
    .then(res => {
        console.log(res);
    }
         
fetch('http://localhost:3001/auth/login',{
    method:"post",
    body : JSON.stringify(loginInfo),
})

proxy 설정을 하지 않고 ajax를 요청하면 위와 같이 코딩이  될 것이다.

프론트에서 요청하는 부분이 한부분도 아니고 만약 주소가 바뀌거나 

서비스를 실제 디플로이한다면 고객사마다 주소가 다르고 포트가 다르고 등등의 상황이 생길 것이다.

그러면 react 프로젝트 내 모든 ajax 부분의 주소를 다 바꾸어야한다.

유지보수가 똥망이 된다.

 

axios.get('/users?email=${email}')
    .then(res => {
        console.log(res);
    }
         
fetch('/auth/login',{
    method:"post",
    body : JSON.stringify(loginInfo),
 })

"proxy": "http://localhost:7080",   //package.json

이를 위와 같이 수정하고 package.json에 프록시를 추가한다.

처음 코드와 똑같이 작동할 것이다.

 

위와 같이 하면 proxy부분만 수정하면 된다.