[react + vercel] cra vercel로 배포하기 + cors 이슈로 인한 proxy 설정

문제 상황

---

cra를 vercel로 배포하려고 하는데 오류가 발생했다. 

Uncaught (in promise) SyntaxError: Unexpected token '<', "<!doctype "... is not valid JSON

콘솔창 오류

 

일단 현재 상황은 아래와 같았다.

package.json에 proxy를 추가해 두었고, cra를 사용했다. 

그리고 vercel로 배포하였을 때 HTML과 CSS는 처음에 렌더링이 잘 되지만, 검색창에 검색어를 입력했을 때 바로 오류가 발생했다.

 

일단 위의 조건들만 가지고 생각했을 때 package.json에 proxy를 추가해 둔 경우, 로컬인 나의 서버에서만 동작되고,

vercel로 배포하면 정적으로 배포되어 cors 오류가 발생되는 것 같았다.

 

 

해결 방법

---

그래서 이러한 문제점을 해결하기 위해 구글링을 해보니 해결방법이 있었다. 

vercel.json이라는 파일을 생성하고, '/api/*' 패턴을 특정 URL로 프록시 해주는 코드를 작성해 주면 문제는 해결된다.

 

src에는 요청을 보내는 경로를 작성하고,

dest에는 프록시 할 대상 URL을 작성해 주면 된다. 

{
  "routes": [
    {
      "src": "/api/(.*)",
      "dest": "https://api.test.com/api/$1"
    }
  ]
}

src는 정규 표현식으로 작성했고, /api/ 다음에 오는 모든 것을 캡처하고, $1을 사용하여 대상 URL에 다시 삽입한다는 뜻이다. 여기서 $1은 src에서 캡처한 그룹이다.

 

다시 말해, /api/ 다음에 오는 모든 것을 캡처하고, 대상 URL에 다시 삽입되어 경로를 완성하는 것이다. 

 

 

참고자료

---

• velog

• stackoverflow

 

---

질문이나 잘못된 점은 댓글로 남겨주세요 :)💖