개발 리뷰 -7- vite proxy를 통한 개발 환경 인증 설정

#0 개요

백엔드 API는 배포 환경에서 존재하고,

FE 개발 중에 개발 환경에서 백엔드 API를 테스트에 이용하고 싶은 상황에서 설정이다.

 

두 가지 해결해야하는 문제점이 있다,

 

1. 배포 환경 FE 주소만 열어둔 백엔드의 CORS를 우회해야 한다.

2, access 토큰을 사이트의 쿠키에 담아야 한다.

 

 

#1 vite의 Proxy를 사용해서 우회하기

server: {
    port: 5173,
    proxy: {
      "/api": {
        target: "https://k12b105.p.ssafy.io",
        secure: true,
        changeOrigin: true,
        configure: (proxy, _options) => {
          proxy.on("proxyReq", function (proxyReq, req) {
            // 쿠키를 포함하여 요청을 전송
            proxyReq.setHeader("Cookie", req.headers.cookie || "");
          });
        },
        cookieDomainRewrite: "localhost", // 쿠키 도메인 재작성
        cookiePathRewrite: "/", // 쿠키 경로 재작성
      },
    },
    host: true,
    allowedHosts: true,
  },

 

1. 설정 분석

1) target: "https://k12b105.p.ssafy.io"

/api 요청을 실제로 보내야 하는 백엔드 서버 주소.

이곳에 중간에 vite 서버에서 작성한 주소로 api 주소를 변환해서 보낸다.

//브라우저가 다음 요청을 보냈다
GET http://localhost:5173/api/user

//최종 요청 URL
https://k12b105.p.ssafy.io/api/user

 

다음과 같이 Vite Dev Server를 거쳐서 요청이 간다. Vite Dev Server는 Node.js 기반의 로컬 서버이기 때문에

브라우저에서 동작하는 CORS가 동작하지 않는다.

 

#2 access 토큰을 사이트의 쿠키에 담기

import { useEffect } from "react";

export const addCookies = () => {
  useEffect(() => {
    const accessToken = import.meta.env.VITE_DEV_ACCESS_TOKEN as string;
    const refreshToken = import.meta.env.VITE_DEV_REFRESH_TOKEN as string;

    setDevAuthCookie(accessToken, refreshToken);
  }, []);

  const setDevAuthCookie = (accessToken: string, refreshToken: string) => {
    if (process.env.NODE_ENV !== "development") return;
    document.cookie = `refresh_token=${refreshToken}; path=/; max-age=3600`;
    document.cookie = `access_token=${accessToken}; path=/; max-age=3600`;
    console.log("개발용 인증 쿠키가 설정되었습니다.");
  };
};

 

process.env.NODE_ENV는 vite 실행 명령어 (dev, build, test)에 따라서 자동으로 설정되는 환경 변수이다.

즉, 개발 환경에서만 동작한다.

또한 env에 저장한 실제 발급 받은 Access 토큰을 넣어주면 localhost 주소에 쿠키를 추가할 수 있다.

 

+중요

배포 서버 백엔드는 local 프론트 브라우저에 쿠키를 저장할 수 없다. URL이 다르기 때문. 따라서 다음과 같이 불편한 방법을 사용하게 된다.