vue - cors 에러 proxy 사용(vite)

문제발생

vue로 spring 서버의 데이터를 가져오는 도중 개발자의 숙원 cors 에러가 발생했다.

---

vite.config.js 작성

import { defineConfig } from "vite"; // Vite 설정을 정의하기 위한 헬퍼 함수 가져오기
import vue from "@vitejs/plugin-vue"; // Vue 플러그인 가져오기

export default defineConfig({
    plugins: [
        vue(), // Vue 플러그인 추가
    ],
    server: {
        proxy: {
            '/api': {
                target: 'https://서버.com', // 프록시 요청을 보낼 대상 URL
                rewrite: (path) => path.replace(/^\/api/, ''), // 경로 재작성(Ex. '/api/test' => 'https://서버.com/test')
                changeOrigin: true, // 원본 서버에 요청 시 호스트 헤더 변경
            }
        }
    },
});

---

사용 예시

axios.get('/api').then(r => {
  console.log(r.data)
})