CLI

npm install http-proxy-middleware --save

CRA로 개발할 경우 src폴더에 setupProxy.js라는 파일을 만들어준다. ⇒ 그렇지 않으면 앱이 프록시 설정을 파싱할 수 없다. (src폴더 즉 ./src에 위치해야 한다.)

setupProxy.js

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/api", {
      target: `api요청을 할 주소`,
      changeOrigin: true,
      pathRewrite: {
        "^/api": "",
      },
    })
  );
};

axios.js

import axios from 'axios';
import {url} from '../constants'; // api url을 가져온다.

export const getDataFromAPI = async (page) => {
  try {
    await axios.get(`/api/${url}&page=${page}`)
  }
  catch(error) {
    console.log(error);
  }
}

설정한 이후 서버를 다시 끄고 켜는 것을 잊지말자!

but 프로젝트 도중 TypeScript에서는 해당 문제가 해결되지 않았다.

⇒ TypeScript template CRA가 http-proxy-middleware를 지원하지 않기 때문이다.