React - Node 서버 프록시 설정

Node JS 전체 링크

리액트 전체 링크

 

react가 Node로부터 요청을 하는 코드의 예시이다.

export const MY_SERVER = `http://192.168.55.120:3002`;

export const getFileFolderList = (path, fileExtension) => {
    fetch(`${MY_SERVER}/getFileFolderList?path=${path}&fileExtension=${fileExtension}`)
    .then((response) => response.json())
    .then((data) => console.log(data));
}

 

매번 fetch 요청을 할 때마다 MY_SERVER를 입력해줘야 한다.

하지만 package.json에 아래와 같이 proxy 설정을 해두면 ${MY_SERVER}를 생략하고 /api 만 호출하면 된다.

export const getFileFolderList = (path, fileExtension) => {
    fetch(`/getFileFolderList?path=${path}&fileExtension=${fileExtension}`)
    .then((response) => response.json())
    .then((data) => console.log(data));
}

 

프록시는 클라이언트가 다른 서버에 간접적으로 접속할 수 있도록 중계할 수 있다.