vite proxy 설정하기

vite 프로젝트 생성

아래의 명령어를 통해 vite 빌드도구를 활용하는 프로젝트를 생성한다.

$ npm create vite@latest

프로젝트 생성후에는 자동으로 프로젝트 루트에 vite.config.ts 설정 파일이 자동으로 생성된다.

proxy 설정

클라이언트가 서버로 바로 접근할 수 없기 때문에 (자바스크립트는 정책 상 같은 출처(프로토콜, 도메인 이름, 포트) 로만 접근이 가능하기 때문에, React에서는 서버와 클라이언트가 포트가 다르기 때문에 정책에 위반되어 클라이언트가 서버에 접근할 수 없습니다. )

클라이언트 → proxy → 서버

proxy 설정을 통해 서버의 API 호출을 가능하게 만들어보자.

vite.config.ts

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

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [react()],
    server: {
        proxy: {
            "/api": {
                target: "https://apis.data.go.kr",
                rewrite: path => path.replace(/^\/api/, ""),
                secure: false,
                changeOrigin: true,
                headers: {
                    host: "apis.data.go.kr",
                },
            },
        },
    },
});

/api로 시작하는 요청은 proxy설정이 적용되어 CORS 이슈없이 서버랑 통신이 가능하다.

"/api/list/1"와 같은 요청을 클라이언트에서 보내면 proxy 설정을 통해 "https://apis.data.go.kr/list/1" 요청으로 변경하여 서버의 API를 정상적으로 호출할 수 있게 해준다.