프록시 설정

Proxy 설정

백엔드의 CORS를 피하기 위해 proxy를 설정해서 사용 한다.

참고: https://velog.io/@skyepodium/vue-proxy-사용하기

vue proxy 사용하기

• cors

교차 출처 리소스 공유 (CORS) - HTTP | MDN

교차 출처 리소스 공유 (CORS) - HTTP | MDN

.env 파일 생성

환경설정을 담당하는 .env파일을 생성 한다.

/.env

NODE_ENV=production
VUE_APP_SERVER=http://localhost:3000

vue에서 .env파일의 환경설정을 읽기 위해서는 반드시 VUE_APP_라는 접두사를 사용해야 한다.이는 process.env.VUE_APP_를 통해 추출할 수 있다.

주의 VUE_APP_SERVER에는 백엔드 서버의 값을 설정해야 한다.

환경변수 설정.

.env : 환경설정

백엔드 서버를 VUE_APP_SERVER =주소

이런식으로 불러옴.값이 추출된다.

vue.config.js 파일 생성

다음과 같이 vue.config.js파일을 생성 한다.

/vue.config.js

const { VUE_APP_SERVER } = process.env
//호출. .env에있는 뷰앱서버 '주소'

//모듈 익스포트한다
module.exports = {
  devServer: {
    proxy: {
      '/serverApi': {
        target: VUE_APP_SERVER,
        changeOrigin: true,
        pathRewrite: { //****정규식표현
          '^/serverApi': ''  //없애준다.
        }
      }
    }
  }
}

/serverApi라는 URL이 입력되면 pathRewrite에 의해 ''로 변경된다

.예) 입력 정보: /serverApi/users ⇒ 프록시 처리: <VUE_APP_SERVER>/users

⇒ 최종 호출: http://localhost:3000/users

주의!! vue.config.js파일의 프록시 처리는 개발PC에서만 동작한다.실제 도커를 통한 nginx에서는 /etc/nginx/conf.d/default.conf파일에서 프록시 처리를 해 주어야 한다.

---

예시

axios 에서 호출 방법

Store파일의 action에서 axios를 활용해 백엔드 서버를 호출할때 /serverApi를 작성하면 proxy를 통해 호출이 된다.

(예) /src/store/models/department.js

...
  actions: {
    // 부서 리스트 조회
    actDepartmentList(context, payload) {
      /* RestAPI 호출 */
      api.get('/serverApi/departments').then(response => {
        const departmentList = response && response.data
        context.commit('setDepartmentList', departmentList)
      })
    }
  }
...

호출 URL은 proxy에 의해 다음과 같이 변경 된다./serverApi/departments ⇒ http://localhost:3000/departments