CORS정책 우회 vercel proxy 설정

react 프로젝트에서는 package.json 에서 "proxy" 값을 설정하여 쉽게 적용 할 수 있다.

  },
   "proxy":"http://localhost:8000" //접속하려는 서버의 루트 URL
}

그러면 실제 HTTP request를 전송하는 코드에서는 위에서 선언한 루트 URL을 제외한 나머지 뒷부분을 주소로 하여 요청하면 된다.
axios.get('http://localhost:8000/api/user');=>axios.get('/api/user');

 

-참고 블로그-

React + Express | CORS 설정하기

하지만 이방법은 로컬에서만 사용가능하다...

나는 vercel로 배포한 사이트에서 api요청을 하는데 cors에러가 발생하여 구글링을 한 결과

vercel.json으로 proxy설정 하는방법을 알게되어 적는다.

 

-vercel doc-

Configuring Projects with vercel.json

 

-참고한 글-

How can I setup proxy using Vercel

// in vercel.json:
// for example proxying /api/ → https://backend-endpoint/

{
  "rewrites": [
    {
      "source": "/api/:path*",
      "destination": "https://backend-endpoint/:path*"
    },
    {
      "source": "/api/:path*/",
      "destination": "https://backend-endpoint/:path*/"
    }
  ]
}