[React+Vite] Cors방지를 위한 Proxy사용

스프링부트와 React(:Vite)와의 연결을 테스트하던 중 익숙한 cors를 맞닿뜨렸다.

이미 API서버에서는 cors를 FE서버를 허용해주고 있었기때문에 별 생각없이 진행하였지만, Nextjs와는 다르게 이번에는 FE측에서도 처리를 해주어야할 일이 생겼다.

결말부터 얘기하자면

[vite.config.ts]

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://localhost:8080/",
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ""),
      },
    },
  }
})

proxy라는 object를 추가해주는것이다.

이렇게 하게되면 FE측에서 요청하는 /api로 시작하는 부분을 target에 정의된 주소로 변환하게 된다.

예를 들어

axios.post('/api/api/v3/blahblah')
를 FE측에서 요청하게 된다면 
http://localhost:5173/api/api/v3/blahblah의 주소로부터 출발되어 proxy로부터
http://localhost:8080/api/v3/blahblah로 변환되게 된다.