vite + react CORS 에러가 났을 때

CORS 에러가 떴을 때, 노드에서는 proxy 설정을 해주어 이를 우회할 수 있다.
proxy 설정은 일반적으로 백엔드 쪽에서 하는 게 좋다고 하지만, 백엔드 서버가 따로 있고 프론트 서버만 따로 개발하는 경우를 위한 방법이다.

CRA를 이용해 개발환경을 만들었다면 package.json 에

proxy: "http://(접근할 도메인)"

를 입력하면 된다고 한다.

그런데 vite로 환경을 구성했다면 설정하는 부분이 다르다.
이 때는 vite.config.js (혹은 .ts) 를 수정해줘야 하고,

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

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8765",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
        secure: false,
        ws: true,
      },
    },
  },
});

와 같이, server 키에 대한 값을 넣어주면 된다.

이렇게 설정하면, 리액트에서 Axios.get("/api/hello") 함수를 호출하면 http://localhost:8765/hello 에 GET 요청을 보내는 것이 된다.