React - Node.js와 연동시 CORS 이슈 간단하게 해결하기

리액트 클라이언트 파트에서 Node.js에게 API 요청시 발생하는 CORS(Cross-Origin Resource Sharing)를 간단하게 해결하는 두가지 방법입니다.

CORS에 대하여 정리 해 둔 글입니다.
pilyeooong.tistory.com/entry/CORS%EB%9E%80-%EB%AC%B4%EC%97%87%EC%9D%B8%EA%B0%80

CORS란 무엇인가?

 

여기서 CORS 이슈를 해결 하기 위 해 소개해드릴 방법은 프록시를 이용하는 것입니다.

 

첫번째 방법입니다. (CRA를 통해 리액트 앱을 생성하였을 경우입니다.)

-  CRA를 통해 리액트 앱을 생성하였으면, package.json에 "proxy" : "http:localhost:5000"(api 서버 주소) 을 추가 작성하여 줍니다.
아주 간단하죠 ?

두번째 방법입니다.

- react-scripts@2 버전 이상부터 사용할 수 있는 방법입니다.

$ npm install http-proxy-middleware --save
$ # yarn 이용시에는 아래 명령
$ yarn add http-proxy-middleware

 

패키지를 설치하시고 난 후, src 폴더 아래에 setupProxy.js 파일을 생성하여 줍니다.

그리고 생성한 파일에, 아래 코드를 작성하여 줍니다.

const { createProxyMiddleware } = require('http-proxy-middleware');
module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
};

target에는 사용하시는 Node.js 서버의 주소를 적어주시면 됩니다.
package.json에 작성하는게 더 간결하고 손쉽지만, 좀 더 부가적인 설정을 추가하여 작성할 수 있다는게 장점인 방법입니다.

클라이언트 구동시, 자동으로 적용 되기때문에 사용을 위해 import 하지 않으셔도 됩니다.

클라이언트 서버를 구동중이셨으면, 재시작을 하시면 정상 작동됩니다.

 

CRA DOC을 참고하여 작성하였습니다.
https://create-react-app.dev/docs/proxying-api-requests-in-development/