[Proxy] Vite Proxy 설정

🌱 INTRO

프로젝트에서 외부 API를 이용해 추천 도서의 데이터를 가지고 오려고 API 요청을 보냈다......... 오호호 잘 도착했을 내 아이들을 기대하며 확인했는데....

CORS 에러...........................

제기랄~~~

퇴치하겠다.

고오오....

어떻게... 어떻게 해결할거지...?

Proxy.

---

우리 프로젝트에서는 vite 를 사용 중이기 때문에 Vite에서 Poxy를 설정하는 방법에 대해 기록하려고 한다! 바로 알아보자...

vite.config.json 경로 설정

// defineConfig 함수로 Vite 설정 정의
export default defineConfig({
  // Vite에서 사용할 플러그인 목록
  plugins: [react(), svgr()],
  // Vite 개발 서버 설정 정의
  server: {
    // Proxy 설정
    proxy: {
      // 경로가 "/api" 로 시작하는 요청을 대상으로 proxy 설정
      '/api': {
        // 요청 전달 대상 서버 주소 설정
        target: 'http://www.aladin.co.kr',
        // 요청 헤더 host 필드 값을 대상 서버의 호스트 이름으로  변경
        changeOrigin: true,
        // 요청 경로에서 '/api' 제거
        rewrite: (path) => path.replace(/^\/api/, ''),
        // SSL 인증서 검증 무시
        secure: false,
        // WebSocket 프로토콜 사용
        ws: true,
      },
    },
  },
});

개인적으로 secure를 왜 false로 하는지 궁금해서 찾아보니 SSL 인증서 검증을 무시하는 것이라고 한다. 보통 로컬 개발 환경에서는 HTTPS가 아닌 HTTP 프로토콜로 요청을 보내는데, secure: false 로 설정되면 proxy 서버가 SSL 인증서를 확인하지 않아 HTTPS 연결을 통해서 보호가 되는 API를 사용할 경우 문제가 될 수 있다. 민감한 데이터를 다룬다면 secure 속성을 true로 설정하는 게 좋다고 한다!

API 호출 URL 수정

• 기존 API 호출 URL

    const url = `${VITE_ALADIN_API_URL}/ItemList`;

    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });

• URL 수정

    const url = '/api/ItemList';

    const response = await fetch(url, {
      method: 'GET',
      headers: {
        'Content-Type': 'application/json',
      },
    });

---

퇴치완.