[Vuejs] vite 환경에서 프록시(proxy) 설정

 

일반 서버와의 개발 환경 구성을 위해서는 역시 프록시 설정을 해 주어야 합니다.

서버에서 교차출처 리소스 공유(cors)를 허용 해 주는 것도 방법이 될 수 있겠습니다.

방법은 아주 간단합니다.

vite 설정 파일에 아래와 같이 추가를 해 주면 됩니다.

* 파일이름 : vite.config.js

import { fileURLToPath, URL } from 'node:url'

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  server: {
    proxy: {
      '/api': {  //#1. axios라이브러리 등으로 http 요청인데 api로 시작하면,
        target: 'https://원하는주소',  //#2. 이쪽 주소로 매핑하여 백그라운드로 보내라.
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
        secure: false,
        ws: true
      }
    }
  }  
})

 

위 proxy 부분을 그대로 사용하여 주면 됩니다.

프록시 형태로 요청해야 되는 주소값이 여러개인 경우 해당 값을 붙여나가면 되겠습니다.

export default defineConfig({
  plugins: [vue()],
  resolve: {

  },
  server: {
    proxy: {
      '/주소1': {  
        target: 'https://원하는주소',
      },
      '/주소2/주소2-2': {  
        target: 'https://원하는주소',
      },
      '/주소3': {  
        target: 'https://원하는주소',
      }
      //이런 식으로...
    }
  }  
})

 

간단하게 정리하여 본 vite 환경에서 프록시(proxy) 설정 이였습니다.

틀린부분 또는 기타 의견은 언제든 환영 입니다! 👻