[react + vercel] Proxy 설정

CROS 이슈 해결?

안전 관련 정보를 제공하는 프로젝트 진행 중에, 배포를 하자 CROS 이슈가 발생하는 문제가 생겼다. 사실 백엔드와의 협업을 많이 해 본 것이 아닌 탓에 많이 당황하고 헤멨다.

백엔드 담당하시는 분이 이런저런 해결책을 많이 제시해 주셨고, 그 중 하나를 골라 문제를 해결했는데 그것이 proxy 되시겠다.

문제상황

백엔드 분이 api를 만들어서 내게 주소 형식으로 데이터를 전달해줬는데, 개발 환경에서는 데이터가 제대로 불러와졌는데, 배포를 하니까 CROS이슈가 발생했다.

왜 이런 일이??

개발환경에서는 되는데 왜 안되느냐 …

검색 결과 문제는 이러했다.

react는 개발환경에서 http 사용.
서버 또한 http로 데이터 전달! → 이런 연유로 개발환경에서는 작동됨
vercel로 배포하자 http가 https로 변환됨
배포된 페이지 확인 → 어? 배포된 페이지는 https 인데 http에서 요청을 보내네? 차단
CROS 발생
백엔드분께 여쭤봄 → https로 만들어봤습니다!!! (감사합니다 ㅠㅠ)
결과

스크린샷 2023-09-24 오전 9 47 45

절망

이런거 해제해야 하는 사이트를 누가 눌러봅니까?

Proxy?

클라이언트와 서버 사이에 존재하며, 중계기로서 대리로 통신을 수행하는 것을 Proxy라고 하며, 그 중계 기능을 하는 주체를 Proxy Server라고 한다.

주방에서 음식을 내 주는 공간과, 요리를 하는 공간이 있다면 그 사이를 넘나드는 음식물 엘리베이터 정도가 되지 않을까 … 하는 생각이 든다.

프록시 설정

// package.json

"proxy": "https://데이터를 받아올 주소"

package.json파일에 프록시 항목을 위와 같이 써넣는다.

const getApi = async () => {
  try {
    const res = await await axios
      .get(`데이터를 받아올 주소의 뒷부분`)
      .then((res) => {});
  } catch (err) {
    console.error(err);
  }
};
getApi();

그러면 개발 환경에서 위 주소 기반으로 데이터를 불러온다.

무슨말이냐 하면, 클라이언트가 데이터를 어디다 요청하면 프록시가 이걸 보고 여기에 필요한 거구나 하고 넣어준다. https://데이터를 받아올 주소/api/hamster 가 있으면 axios에서는 /api/hamster 만 넣어서 요청하면 된다는 것이다. 그러면 개발환경에서 깔끔하게 불러와진다.

vercel proxy 설정

하지만 … axios에서 저런 식으로 작성하고 땡친다면, 배포환경에서는 그냥 https://배포환경주소/api/hamster 로 불러오게 된다. 따로 설정해 줘야 한다는 이야기!

vercel은 프록시 설정을 하는 방법이 있다.

우선 최상단에 vercel.json 파일을 추가한다.

// vercel.json

{
  "rewrites": [
    {
      "source": "/api(.*)",
      "destination": "https://데이터를 받아올 주소/api"
    }
  ],
  "headers": [
    {
      "source": "/(.*)",
      "headers": [
        { "key": "Access-Control-Allow-Credentials", "value": "true" },
        { "key": "Access-Control-Allow-Origin", "value": "*" },
        {
          "key": "Access-Control-Allow-Methods",
          "value": "GET,OPTIONS,PATCH,DELETE,POST,PUT"
        },
        {
          "key": "Access-Control-Allow-Headers",
          "value": "X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Content-Type, Date, X-Api-Version"
        }
      ]
    }
  ]
}

내 경우는 Access-Control-Allow-Credentials 도 허용안되는 문제가 있어서 헤더에 저렇게 설정들을 넣어서 만져줬다.

source에는 “/api(뒤에오는모든 주소)” 에 대해 이 변경을 진행하겠다는 이야기.

클라이언트 요청을 주소를 destination에 들은 주소로 바꾸겠다는 말이다.

이렇게 바꾸어서 배포했더니 됐다…. proxy로 해결할 수 있었다면 진작에 해 봤어야 했는데.

이런 괴로운 경험은 다시는 하고 싶지 않다…

백엔드분께도 심심한 사과의 말씀을 드리고 싶다.