vercel에서의 프록시 설정

최훈오·2023년 8월 11일

지난번에 CORS 문제를 프록시 설정을 통하여 해결하였다.
따라서 로컬에서 http 통신을 하는데 문제는 없지만 이번에 vercel에서 서비스를 배포하고나서 405 에러가 계속 생겨났다.

리액트를 vercel에서 배포할때 환경변수 설정을 안한건가 해서 .env파일을 만들어 환경변수 설정을 하여 baseURL을 받아오도록 했는데 해결되지 않았다.
물론 Vercel에서도 환경변수를 등록했다.

여러 검색을 한 결과 얻은 정보가 있다.

로컬에서는 프록시를 통해 CORS 문제를 우회할 수 있지만, 실제 배포 환경에서는 프록시 설정이 무시되므로 다른 방법을 고려해야 한다.

해결방법이 얼마나 있는지는 모르겠지만 하나를 선택하여서 해결하였다.

.vercel.json 파일을 루트 디렉토리에 생성한 후 다음과 같은 코드를 작성하면 된다.

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "http://43.200.20.25:8080/:path*"
    }
  ]
}

예를 들어, 클라이언트에서 요청하는 주소가 /api/로 시작한다면 proxy 서버가 http://43.200.20.25:8080/로 변환 해준다는 뜻이다.

프록시 설정을 했으니 환경변수를 필요없나? 해서 관련된 파일을 제거했더니 정상적으로 돌아간다!
환경변수 문제가 아닌 프록시 문제였음!

출처