vue, proxy, cors 또 모르면 문신 새기자..

프로젝트 초기 설정을 할 때마다 마주했던 문제다. API 서버에서 데이터를 가져오려고 하면 꼭 항상 마주하는 문제이고, 항상 여기서 한시간 넘게 해맨다. 해매도 해매도 모른다는거다. 이정도면 알려고 안하는게 아니시냐.. 바보가 아니면 이제는 알아두셔라..

1. vue 에서 proxy 설정을 해주는 이유
   일반적으로 프록시, 프록시 서버는 클라이언트와 서버의 간의 중간다리 역할을 한다.
   vue CLI 서비스를 사용하여 개발에서 앱을 실행하는데, 개발 환경에서 /api/reservation.. 로 요청을 하면 자동으로 http://localhost:8080/api/reservation 로 호출이 된다.
   요청하려는 서버에서 localhost, 내 IP는 허용된 도메인이 아니기 때문에 데이터를 요청하면 접근할 수 없다는 CORS 에러가 발생한다. 이를 해결하기 위해서 API 서버에 데이터를 요청할 때, 서버에서 허용한 도메인으로 데이터를 요청하도록 요청전 허용한 IP로 데이터를 요청할 수 있도록 변경하여 요청한다.
2. proxy 서버
   클라이언트가 자신을 통해서 다른 네트워크 서비스에 간접적으로 접속 가능하게 해주는 응용 프로그램, 클라이언트와 서버 사이에서 http 요청과 응답을 대신 처리해주는 역할을 하는 서버.
3. proxy 설정하기

vue 에서 proxy 서버를 설정하고, 클라이언트에서 http를 요청하면
proxy 서버가 웹서버로 http 요청을 대신함으로서, cors문제를 해결한다.

1. target
   도메인, 포트, 프로토콜을 서버가 허용한 주소랑 맞춰달라고.

changeOrigin
로컬호스트 url과 서버주소가 다르기 때문에 브라우저는 교차출처 에러를 낸다. 웹팩 데브 서버가 프록싱 역할을 해준다. 개발하는 과정에서 localhost:8080/api/reservation 으로 요청하지만, 중간에 프로시 서버 덕분에 백엔드 api와 같은 도메인으로 요청한 것으로 인식하게 할 수 있다.