[cors이슈] webpack devServer proxy 사용하여 해결

내년도에 프로젝트에 적용한 모니터링 솔루션을 분석하던 중, sentry를 사용하기로 하였습니다.
그러나 sentry를 설치하고서 프로젝트를 실행하니 api 호출할때 cors가 발생하였습니다.

Access to XMLHttpRequest at 'http://localhost:8084/abc/test' from origin 'http://localhost:8091' has been blocked by CORS policy: Request header field sentry-trace is not allowed by Access-Control-Allow-Headers in preflight response.

sentry에서 api호출시에 request header에 sentry-trace라는 값을 넣어주고 있어 발생한게 아닌가 싶어 postman에서 동일한 값을 헤더에 넣어서 테스트해보니 정상적으로 호출이 되었습니다.ㅇㅅㅇ;;

음,,, 그러면 문제는 프론트에서 해결을 해야하는데,,,
에러 문구를 다시 확인해보면, localhost:8084(백엔드 포트) 에서 localhost:8081(로컬 포트) 을 막고 있다고 나와있습니다.
그래서 webpack devServer에 proxy를 사용하여 해결하였습니다.

cors란?

현재 주소와 api요청한 주소가 일치해야지만 데이터 접근이 가능합니다. (로컬 도메인 = 백엔드 도메인)
만약 다른 도메인에서 API 요청시에는 cors 설정이 필요합니다.
보통은 백엔드에서 해당 도메인을 허용해주는 작업을 합니다.
그러나 프론트에서도 웹팩 개발 서버에서 proxy를 사용하므로써 해결 가능합니다.

proxy(프록시)란?

API요청시에 백엔드 서버로 직접 요청을 하지 않습니다.
현재 개발 서버의 주소 (http://localhost:8091)로 api를 요청하면 웹백 개발서버에서 요청을 받아 백엔드로 전달되는 형식입니다.

devServer: {
    proxy: {
      "/abc": "http://localhost:8084",
    },
}

백엔드와 프론트 환경에 proxy를 두어서 로컬에서 동일한 8091번 포트에서 동작하는 것처럼 환경을 구성해줍니다.
'/abc'는 백엔드로 요청하는 엔드포인트, local포트가 8091이 아닌 백엔드 포트인 8094포트를 사용하는것입니다.

만약 환경별로 도메인 주소가 다른경우에는 아래와 같이 baseURL을 설정해줍니다.

Vue.http.defaults.baseURL = process.env.NODE_ENV === 'development' ? '/abc' : 'https://api-server.com/abc/';