vite 환경에서 proxy 설정하는 방법, vite 환경에서 cors 에러 해결하기

메인 프로젝트에서는 CRA보다 빠른 환경에서 개발을 할 수 있다는 멘토님의 말에 vite 환경에서 개발을 하게 되었습니다. 

 

프론트단에서 cors 에러를 해결하기 위해 proxy 설정을 하게 되었고, cra 환경과는 다른 설정 방법이기에 정리합니다. 

 

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import svgr from "vite-plugin-svgr";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svgr(), react()],
  esbuild: {
    define: {
      this: "window",
    },
  },
  server: {
    proxy: {
       with options
       "/api": {
        target: "http://서버주소",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
       },
      "/kakao": {
        target: "http://43.200.20.180:8080/oauth2/login/callback/kakao",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/kakao/, ""),
      },
    },
  },
});

 

 

vite의 proxy 세팅에서 server obj key는 해당 key로 시작하는 요청에 대하여 작업을 수행해달라 라는 의미를 가진다. 그래서, "/api" 라는 url로 시작하는 요청에 대해 세팅을 해주어야 한다. 

 

 

 

😃 잘못된 개념 전달이 있다면 댓글 부탁드립니다. 저의 성장에 큰 도움이 됩니다🤓