Vite와 React를 활용한 HTTPS 개발 환경에서 HTTP 백엔드 API 호출하기

kiwon kim·2025년 2월 11일

Frontend

목록 보기

21/30

로컬 개발 환경에서 프론트엔드 애플리케이션을 HTTPS로 실행할 때, HTTP 프로토콜을 사용하는 백엔드 API 서버에 직접 요청을 보내면 CORS(Cross-Origin Resource Sharing) 문제가 발생할 수 있습니다. 이번 포스팅에서는 Vite의 프록시 기능을 활용하여 이러한 문제를 해결하고, IP와 포트를 지정한 백엔드 서버에 API 요청을 원활하게 보내는 방법을 알아보겠습니다.

문제 상황

현대 웹 애플리케이션 개발에서는 보안을 위해 로컬 개발 환경에서도 HTTPS를 사용하는 경우가 많습니다. 그런데 백엔드 API 서버가 HTTP 프로토콜을 사용한다면, 브라우저는 보안상의 이유로 다른 프로토콜 간의 요청에 대해 CORS 에러를 발생시킬 수 있습니다. 이 문제를 해결하기 위한 한 가지 방법은 프록시 서버를 사용하는 것입니다.

Vite는 내장된 프록시 기능을 제공하여, 클라이언트가 마치 같은 도메인에서 API를 호출하는 것처럼 보이게 할 수 있습니다. 이를 통해 CORS 문제를 우회할 수 있습니다.

Vite 프록시 설정

먼저, Vite의 설정 파일인 vite.config.ts에서 프록시 설정을 추가합니다. 예를 들어, 백엔드 서버의 IP가 192.168.0.100이고 포트가 5000인 경우 다음과 같이 설정할 수 있습니다.

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

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        // 백엔드 서버의 주소 (예: http://192.168.0.100:5000)
        target: 'http://192.168.0.100:5000',
        changeOrigin: true,
        // 클라이언트 요청 경로에서 `/api` 프리픽스를 제거
        rewrite: (path) => path.replace(/^\/api/, ''),
        // HTTP 백엔드를 사용할 경우 secure 옵션을 false로 설정 (SSL 인증서 검증 비활성화)
        secure: false,
      },
    },
  },
});

프록시 설정 옵션 설명

/api
클라이언트에서 API 요청 시 사용하는 경로 프리픽스입니다. 예를 들어, /api/users로 요청하면 프록시 설정에 따라 실제 요청은 백엔드 서버로 전달됩니다.
target
백엔드 서버의 IP와 포트를 지정합니다. 위 예시에서는 http://192.168.0.100:5000으로 설정했습니다.
changeOrigin
요청 시 Origin 헤더를 타겟 서버의 것으로 변경합니다. 이를 통해 서버에서 올바른 요청으로 인식할 수 있습니다.
rewrite
클라이언트 요청 경로에서 /api 프리픽스를 제거하여 백엔드 서버에 맞게 경로를 재구성합니다.
secure
백엔드 서버가 HTTPS가 아닌 HTTP일 경우 false로 설정하여 SSL 인증서 검증을 비활성화합니다.

클라이언트에서 API 호출하기

프록시 설정을 완료했다면, React 애플리케이션 내에서 API 요청을 할 때 단순히 /api 프리픽스를 붙여서 호출하면 됩니다. 예를 들어, Axios를 사용하여 API 호출을 할 때 다음과 같이 작성할 수 있습니다.

import axios from 'axios';

const fetchData = async () => {
  try {
    // 프록시 설정에 따라, 실제 요청은 http://192.168.0.100:5000/endpoint로 전달됩니다.
    const response = await axios.get('/api/endpoint');
    console.log('API 응답 데이터:', response.data);
  } catch (error) {
    console.error('API 요청 실패:', error);
  }
};

fetchData();

이 코드에서 /api/endpoint로 요청하면, Vite 개발 서버가 이를 백엔드 서버인 http://192.168.0.100:5000/endpoint로 프록시 처리해 줍니다.

추가 고려사항

CORS 문제 해결
프록시를 사용함으로써 브라우저는 클라이언트와 백엔드 서버 간의 요청이 동일한 도메인에서 이루어지는 것으로 인식하게 되어 CORS 에러를 회피할 수 있습니다.
HTTPS 개발 환경
로컬 개발 환경에서 HTTPS를 사용한다면 Vite의 server.https 옵션을 활용하여 자체 서명된 인증서를 설정할 수 있습니다. 이 경우 백엔드 서버가 HTTP일 때 secure 옵션을 false로 설정하는 것이 필요합니다.
프로덕션 환경
프록시 설정은 개발 환경에서 주로 사용되며, 프로덕션 배포 시에는 별도의 API 게이트웨이나 CORS 설정을 통해 백엔드와 프론트엔드 간의 통신을 관리하는 것이 좋습니다.