Vercel에서 Proxy를 사용해보자.

axios로 CORS 정책을 준수하는 방법에 대해서 공부하고 있다.

크게 두가지 방법으로 나뉘는데,

1. 서버에서 Access-Control-Allow-Origin 헤더를 직접 설정해준다.
2. 프론트에서 Proxy를 이용해서 설정한다.

이 같은 방법이 있다.

위의 두 방법을 모두 적용해 두가지 방식의 axios 통신을 구축한다음
dev 환경에서 실행했을 땐, 모두 정상작동
webpack 프로젝트 환경 내에서 devServer를 통해 proxy를 태운다면 원활하게 작동

CTO님께서는 Production에서는 또 다른 방법이 필요할거라고 말해주셨다.
vercel을 통해 환경을 바꿔주고, 실행해봤다.

그런데 vercel을 통해서 배포했을때,
304라는 에러와 함께 아무것도 전달되지 않았다.

proxy를 태우지 않은 경우에는 정상적으로 dev서버와 통신이 가능했다.
검색을 해보니, webpack devProxy는 프로덕션 환경에서 사용하기 위해 있는 것이 아니라는 문서를 볼 수 있었다.

생각해보니,,, 이름부터 devProxy 인데, 어떻게 프로덕션에서 사용될 수 있겠나,,?

찾아보니 vercel에서 Proxy를 태우기 위해선, vercel.json이란 파일을 root에 생성해주고, 다음과 같이 설정해주면 된다.

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://~~;
    }
  ]
}

source 라고 적혀있는 부분을 찾아, destination 으로 대신 전달해주는 셈이다.
이러면 성공적으로 vercel에서도 200 통신이 떨어지는 것을 확인할 수 있다.