[Vite + Proxy] 백엔드 서버 연동 CORS 문제 Proxy 설정으로 해결!

🫠 팀프로젝트를 진행하면서 백엔드 서버로 연동할 때, CORS 문제가 정말 어마어마하게 많이 발생했다. 
연동 하나 하려고 하면 CORS 문제가 계속 떠버려서,, 프론트 인원 중 한 명은 언젠가는 해야 할 일이었다..!
어찌어찌해서 Proxy 설정을 담당하게 되었다 💪🏻

 

 

 

---

📌 Proxy란?

👉🏻 프록시(Proxy)는 클라이언트와 서버 간의 통신을 중개하는 서버
➡️ 클라이언트는 프록시 서버를 통해 요청을 보내고, 프록시 서버는 해당 요청을 받아서 대신 서버로 전달
➡️ 서버는 응답을 프록시 서버로 보내고, 프록시 서버는 다시 클라이언트에게 응답을 전달

✅ 프록시 서버 사용하면 클라이언트와 서버 사이의 통신을 조정하고, 네트워크에서 발생할 수 있는 일부 문제를 해결

 

 

 

✏️ Proxy 적용하기 

import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://backend-server',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
    },
  },
})

👉🏻 파일 위치 : vite.config.ts

✅ /api ➡️ 클라이언트에서 백엔드 API에 대한 요청을 식별하는 경로
✅ target ➡️ 해당하는 백엔드 서버 주소 연결
✅ rewrite ➡️ 프록시 서버를 통해 전달되는 요청 경로를 수정하는 함수 (수정 필요 없을 시, 생략 가능)

 

 

 

❗️Proxy 설정 오류 

⚠️ vite의 typescript에서 import.meta.env 인식 오류로 importMeta의 .env 사용 불가

1️⃣ 해결 시도 ❌
“vite-env.d.ts”를 tsconfig.json에 추가 후, 파일 위치 이동 ➡️
src 내 typescript 문법 오류 발생 ➡️
”vite-env.d.ts” 원위치 후, 같은 파일 작성하여 상위 폴더에 추가 ➡️ 여전히 env 인식 X 

2️⃣ 해결 시도 ❌
import.meta 인터페이스 확장을 위한 “types.d.ts” 파일 추가 후, declare global 작성 ➡️ 여전히 env 인식 X

3️⃣ 해결 시도 ⭕️
loadEnv(mode, process.cwd(), ‘’ ) : 현재 작업 디렉토리에 있는, 모드에 해당하는 ‘.env’ 파일을 찾아서 모든 환경 변수를 로드함 ➡️ mport.meta.env를 사용하지 않고, .env 파일의 환경 변수에 접근하여 해결

 

 

 

🫠 해결 한 마디

CRA를 사용하지 않고 Vite로 프로젝트를 생성하니, vite의 typeScript에서 .env 파일을 제대로 인식하지 못하는 경우가 생겨버렸다.. 😭 그래도 CRA보다 Vite로 하는 게 훨씬 좋으니까!! 
하루종일 Proxy 오류를 잡아서 지쳤지만.. 그래도..! 좋은 경험..!