[React] vercel 배포시 http, https axios 통신 제대로 하는법

create-react-app으로 vercel 배포시 axios 오류가 발생했다.

create-react-app으로 만든 리액트 웹 어플리케이션을 vercel를 통해서 간단히 배포할려 했는데 axios에서 제대로 url이 보내지지 않는 오류가 발생하였다.

 

vercel로 백엔드 통신을 하기위해 axios를 이용하는데, axios.create로 만든 기본 url이 vercel의 기본 주소 url로 되어 있었다.

.env 설정을 "http://주소~~"로 추가하다보니까 "를 나타내는 %22가 url에 같이 추가된 모습니다.

 

해결법

먼저 루트 디렉토리에 vercel.config 파일을 만들고 다음과 같이 작성한다.

{
  "version": 2,
  "rewrites": [
    {
      "source": "/api/(.*)",
      "destination": "기본 베이스 url/$1"
    }
  ]
}

그러면 이제 vercel 기본 주소로 mocking되던 axios요청이 제대로 destination으로 보내질 것이다.

vercel http 요청

vercel은 기본적으로 https 요청을 하기때문에 만약 http 요청이 필요하다 싶으면 다음과 같은 방법을 사용하면 된다.

 

일단 vercel.config에서 destination을 http://서버 url/$1로 바꾼다.

 

그리고 사이트 설정에 들어간다.

 

 

그리고 브라우저의 사이트 설정에서 안전하지 않은 설정을 허용하면 성공적으로 axios 통신이 된다.

vercel https 요청

https 요청은 간단하게 그냥 destination에 주소를 넣으면 바로 된다.

 

 

결과

STATUS : 200

성공적으로 작동한다.

 

알면 쉬운데 모르면 오래걸린다...