proxy 서버 띄워 작업하기 (feat. vite)

문제발생!!!!

백엔드 분들과 협업하여 작업하던 프로젝트에서 CORS 에러가 발생했다.

백엔드 측에서는 프론트에서 사용하는 포트번호를 열어주었다는 데 그게 적용되지 않는 문제였다.

(시큐리티를 적용하고 나서 발생한 문제였는데, 백엔드 측에서 한 가지 설정을 빼먹으셨던 것이 원인이었다.)

마감이 얼마 남지 않았는데 권한 에러가 발생해 API 연동과 관련된 모든 작업이 all stop되는 사태가 발생했다 (っ °Д °;)っ

 

 

그래서 다양한 해결법을 알아보던 중 proxy 서버를 띄워서 작업해보라고 멘토님께서 제안해주셨다!

배포할 때 적용시킬 순 없지만 (일반적으로 배포할 때 proxy서버를 띄우지 않으니까) 일단 코드를 짜고 작업할 수 있는 환경을 만들 수 있었다.

 

개념을 먼저 잡아보자!

Proxy 서버란?

프록시 서버는 클라이언트에서 서버로 접속할 때 직접적으로 접속하지 않고 중간에 대신 전달해주는 서버를 말한다.

 

왜 사용할까?

1. 보안

직접적으로 클라이언트에서 서버로 요청을 보내면 서버의 주소가 노출되기 쉽고 다른 익명의 사용자가 접근할 위험이 있다. 프록시 서버를 사용하면 서버의 IP를 숨기는 것이 가능하므로 안전해진다!

 

2. 캐시

이전에 했던 요청들을 프록시 서버에 저장해두어 다음 번에 재요청을 보낼 땐 서버를 거치지 않고 데이터를 주고 받을 수 있기 때문에 속도가 더 빨라질 수 있다.

 

3. 우회

IP주소를 감출 수 있기 때문에 어느 곳에서 접속한지를 숨길 수 있다. 즉, IP를 통해 접속을 감지하는 사이트를 우회할 수 있다!

 

 

어떻게 해결?

// vite.config.ts

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

export default defineConfig({
  plugins: [react(), tsconfigPaths()],
  server: {
    proxy: {
      "/back": {
        target: "엔드포인트 주소를 여기에",
        changeOrigin: true,
        rewrite: path => path.replace(/^\/back/, ""),
      },
    },
  },
});

 

// instanceApi.ts

import axios, {AxiosInstance} from "axios";

const instance: AxiosInstance = axios.create({
  baseURL: "/back",
  headers:{
    "Content-Type": "application/json",
    Authorization: `Bearer ${accessToken}` //로그인,회원가입 기능이 완벽 구현되지 않아 accessToken을 박아넣어놓고 썼다
  }
})

 

이렇게 하면 proxy 서버를 통해 정상적으로 api 연동이 되는 것을 볼 수 있었다.