react에서 proxy설정하기(http-proxy-middleware)

인트로

오늘은 클라이언트에서 프록시를 설정하여 CORS 오류를 방지하는 실습을 진행했습니다.

간단하게 package.json을 통해 설정할 수도 있지만 이번 포스트에서는 http-proxy-middleware를 사용해 여러 개의 도메인에서 응답을 받아오는 경우를 다뤄보겠습니다.

---

설정

npm install http-proxy-middleware

//src/setupProxy.js
const { createProxyMiddleware } = require("http-proxy-middleware");

module.exports = (app) => {
  app.use(
    "/api",
    createProxyMiddleware({
      target: "http://localhost:3080",
      changeOrigin: true,
    })
  );
  app.use(
    "/api2",
    createProxyMiddleware({
      target: "http://localhost:3070",
      changeOrigin: true,
    })
  );
};

'/api'로 시작되는 API는 포트:3080으로 설정된 서버 URL로 호출하고

'/api2'로 시작되는 API는 포트:3070으로 설정된 서버 URL로 호출하도록 설정하였습니다.

 

changeOrigin은 호스트 헤더를 target URL로 변경하는 옵션이라고 합니다. Default는 false입니다.

 

실제로 fetch하는 함수는 다음과 같습니다.

'/api ~'로 시작 시 포트 3080인 서버에서 책 데이터를 가져오고 '/api2 ~'의 경우 포트 3070인 서버에서 todo 데이터를 가져옵니다.

export const getAllDatas = async (isBook) => {
  const url = isBook ? "/api/books" : "/api2/todos";
  const response = await fetch(url);
  return await response.json();
};