[React] CORS 에러를 잡아보자(feat.프록시)

Yeongsan Son·2021년 5월 24일
0

cors

CORS 에러를 해결하는 방법은 여러 가지가 있지만 프록시 서버를 이용한 해결 방법을 알아보겠다.

모듈을 사용해 프록시 서버 설정

모듈 설치

npm install http-proxy-middleware --save

프록시 설정 파일

src/setupProxy.js 생성하고 다음과 같은 코드를 삽입
노드 서버의 포트 번호와 target의 포트 번호를 맞추어 설정

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

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

Client-Server

클라이언트 서버에서 요청을 보낼 때 기존 URL을 http://localhost:5000/~ 에서 /~로 target으로 설정된 부분은 제외하고 이후의 경로만 입력하면 끝!

profile
매몰되지 않는 개발자가 되자

0개의 댓글