[Vue] axios 공통모듈화

vue로 프로젝트를 하면서 서버 통신을 위해 axios를 사용 하면서 외부 api를 호출하려고 할때 cors가 발생하여 vue.config.js에 아래와 같이 devServer에 proxy 설정해 주어 cors 해결 후 사용을 했었습니다.

module.exports = {
  devServer: {
    proxy : 'http://xxx.xxx.xxx.xxx:8080'
  },

 

그런데 개발서버에 배포 후 톰캣을 이용해서 가동을 하니 proxy에 설정된 주소를 못타더라구요.(빌드하면 devServer를 사용하지 않는다고함.) 그래서 개발환경, 배포 환경 나눠서 서버 통신을 할 수 있게 공통 모듈로 바꾸어 주었습니다.

일단 .env.development파일과 .env.production 파일을 최상위 루트에 생성 하여 각각 BASE_URL과 서버 호출 주소를 적어줍니다.

BASE_URL=/
VUE_APP_TITLE=타이틀입력
VUE_APP_API_URL=https://xxx.xxx.xxx.xxx:8080

 

그리고 공통 모듈로 만들어줄 js 파일을 생성 하고 axios를 import 후 interceptors를 사용하여 서버 호출을 관리 해 줍니다. 먼저 interceptors에 대해 정리를 하자면 아래와 같습니다.

 

Intercepter

1) 정의

인터셉터는 1. 요청하기 직전, 2. 응답을 받고 then, catch로 처리 직전에 가로챌 수 있습니다.

 

2) 구성

1. 인스턴스 생성
2. request 설정
3. response 설정

 

그럼 인터셉터로 관리 해주기 위해 js 파일을 생성 후 아래와 같이 작성 해 줍니다.

import axios from 'axios'
import Vue from 'vue'

const instance = axios.create({		//인스턴스 생성
    baseURL: process.env.VUE_APP_API_URL || ''
})

const vm = new Vue()

instance.interceptors.request.use(config => {		// 요청 인터셉터
    if (config.method !== 'get') {		// 서버와 통신을 post로 하고 있어서 조건문은 수정 가능
        config.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
        config.headers.post['Access-Control-Allow-Origin'] = '*'	// cors 방지 코드
    }
    vm.$Progress.start()
    return config
}, error => {
    return Promise.reject(error);		// 요청 에러 직전 호출
})

instance.interceptors.response.use(response => {	//응답 인터셉터
    vm.$Progress.finish()
    return response
}, error => {
    console.error('axios error : ', error)
    return Promise.reject(error);
})

export default instance		// 인스턴스를 외부에서 사용할 수 있도록 export

 

 vue.config.js 파일의 devServer는 기본 설정으로 변경 해 줍니다.

devServer: {
    host: 'localhost',
    port: 8080,
    open: true,
    hot: true,
    historyApiFallback: true
  }

 

그리고 axios를 사용할 컴포넌트에서 만든 js 파일을 import 하여 .post 하여 사용하시면 됩니다