Vue.js proxy 설정

강정우·2023년 4월 19일
0

vue.js

목록 보기
47/72
post-thumbnail

Proxy 설정

module.exports = defineConfig({
    transpileDependencies: true,
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:8081',
                // target: 'http://pc주소값:8081',
                changeOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
})

Proxy 사용

async api메서드(context, payload) {
  const 변수1 = context.rootGetters['vuex state'];
  const params = {
    변수1, 
    키값2: payload.변수, 
    변수3: 벨류,
  };
  axios.get('/api/sms/reserve', {
    params
  }).then(res => {
    console.log(res)
  }).catch(err => {
    errLogic(err);
  })
}

Error 로직

const errLogic = (err) => {
    if (err.response) {
        const {status, config} = err.response;
        if(status === 400){
            console.log('DB 에러 SW팀에 문의하세요')
        }
        if(status === 404){
            console.log(`${config.url}을 찾을 수 없습니다.`)
        }
        if(status === 500){
            console.log('서버에 문제가 생겼습니다. SW팀에 문의하세요')
        }
    } else if (err.request) {
        console.log("에러", err.message);
    } else {
        console.log("에러", err.message);
    }
}
profile
智(지)! 德(덕)! 體(체)!

0개의 댓글