http-proxy-middleware 배포 시 배포 사이트 url로 먹는 오류

1. 상황

CORS로 인하여 proxy를 사용하여 CORS 정책을 우회하였지만 로컬에서는 제대로 데이터를 받아오는 걸 확인 후 배포한 사이트에는 api url 주소가 아닌 배포한 주소로 url로 변경되어 원하는 데이터를 받아오지 못하여 404 에러가 발생하였다.

api 주소 https://api.com 이 나와야하는데
배포한 사이트 https://deploy.com 주소로 나옴

2. 해결하기

http-proxy-middleware 사용

• npm i http-proxy-middleware
• index.js 밑에 setupProxy.js 설정

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

module.exports = function (app) {
  app.use(
    createProxyMiddleware("/v1", {
      target: "https://api.com",
      changeOrigin: true,
    })
  );
};

axios instance 생성

import axios from "axios";

const instance = axios.create({
  baseURL: "https://api.com",
});

export { instance };

api 통신 부분 변경

const fetchRankingData = async () => {
  try {
    const response = await instance.get("/v1/ABC", {
      headers: {
        "api-key": process.env.REACT_APP_API_KEY,
      },
      params: {
        id: 1,
      },
      withCredentials: true,
    });

    console.log(response);
    return response.data;
  } catch (error) {
    console.error("Error fetching ranking data:", error);
    throw error;
  }
};

이렇게 하면 정상적으로 endpoint가 들어오는 것을 확인할 수 있다.