react에서 proxy 설정 방법

설명 이유

처음에 laravel로 진행할 때 nginx로 프론트와 백엔드 경로를 맞추다보니 프론트에서 proxy 설정을 하지 않아도 cors 에러가 발생하지 않았습니다. 그런데 spring를 서버로 해서 이미 설정된 host에 맞출려고할 때 생각처럼 되지 않았는데 그때 사용하는 것이 proxy라는 것을 알았습니다. 

proxy 는 일반적으로 서버와 클라이언트 사이에서 요청을 중개하고 수정하는 역할을 개념만 알았지 어떻게 이용되는 지는 

잘 알지 못했지만 이번 계기로 정확하게 알게 되었습니다. 

 

사용 방법

1. package.json에 proxy를 설정합니다. 

"proxy": "http://localhost:3001/"

설명

여기서 host 경로는 백엔드에서 값을 보내고 있는 host를 넣으시면 됩니다. 

2. 서버 host를 이용하는 axios에 react 접속시 나오는 경로를 연결합니다. 

        const url = "http://localhost:3000/";
        const response = await axios.get(url, {
          headers: {
			// headers는 서버 요청에 부합하게 셋팅 
          },
        });

설명

url은 현재 react 접속시 localhost:3000이지만 서버 요청을 할 때에는 서버 host : localhost:3001 요청한 것이기 때문에 proxy가 됩니다. localhost:3001은 예시임으로 서버 host를 넣으시면 됩니다.