[React] (Proxy) 리액트와 노드 다른 포트 통신 설정

프론트는 localhost:3000에서 서버는 localhost:5000에서 개발하는데 설정을 해주지 않으면 통신 오류가 납니다.

3가지 방법을 소개해 드리도록 하겠습니다.

 

1. proxy 1 (개인적으로 추천)

2. proxy 2

3. cors 사용 

 

 

 

3. 수동 Proxy 설정  ⭐️

 

가장 귀찮지만 확실하게 사용자가 정의해 줄 수 있는 방법입니다. 

먼저 라이브러리를 설치해 줍니다.

# yarn add http-proxy-middleware

 

 

리액트 프로젝트의 src 폴더 안에 setupProxy.js 파일을 추가합니다.

파일의 내용은 다음과 같습니다.

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
	app.use(
		createProxyMiddleware('/api', {
			target: 'http://localhost:서버에서 사용할 포트', 
			changeOrigin: true,
		})
	);
};

이렇게만 작성해주고 /api 부분을 바꿔 어떤 요청을 받으면 포트를 바꿔줄지 설정 가능합니다.

(/api 로 시작하는 url을 모두 처리합니다. ex. /api/hello , /api/world)

setupProxy.js 는 별도의 import를 할 필요 없이 자동으로 실행됩니다.(파일 이름을 오타내지 않게 주의하세요.)

2. 간단 Proxy  

단순하게 사용하기엔 좋습니다. 하지만 인터넷 환경에 따라서 안될때도 있더라구요..?

단순히 리액트 프로젝트 폴더의 package.json에 다음을 추가해주면 됩니다.

  "proxy": "http://localhost:서버에서 사용할 포트",

이제 get 요청을 한다고 할땐 '/api/원하는주소' 로 하면 됩니다.

/api를 써줘야 한다는게 단점이고 이게 싫으신 분은 3번 방법을 사용하시면 됩니다.

3.  cors 사용

cors 라이브러리를 이용하는 방법입니다. 

# yarn add cors로 설치

# 서버 실행파일에 추가
const cors = require('cors'); 
app.use(cors());