Vite, 번들링이 굉장히 빠른 장점이 있어서 요청받은 기능을 구현하는데 사용하고 있다.
상시로 서버를 돌릴만큼의 서비스는 아니기에 로컬 환경에서 처리하는것이 적당했다. 다만, 외부 API가 필요한 상황이라 API 호출 시 CORS 문제를 일으켰다. 특히, 네이버는 서버에서만 API를 처리함을 강제하고 있어 어쩔 수 없이 CORS를 잡고 넘어가야 했다.
간단하게 프록시로 우회하여 사용하려 했으나 예전처럼
1. package.json에 proxy 추가
2. htt-proxy-middleware 외부 라이브러리 적용
위 두가지를 붙여보았으나 정상적으로 동작하지 않았다.
Vite 공식 홈페이지를 이리저리 찾아보니 Server option을 주는 방법이 조금 남달랐다.
Vite 프로젝트를 생성하면 루트폴더에 vite.config.js 파일이 생성되는데 이 파일을 아래와 같이 설정하면 된다.
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server : {
proxy : {
'/api' : {
target : "https://naveropenapi.apigw.ntruss.com",
changeOrigin : true,
rewrite : (path) => path.replace(/^\/api/, ''),
secure : false,
}
}
}
})
간단하게 보면
클라이언트에서 "https://DOMAIN/api/alpha/beta" 로 요청한다. "/api"라는 Path를 추가하여 프록시를 거치도록 하였다.
DOMAIN을 사용자가 지정한 도메인으로 바꾸고, Path중 프록시를 거치기위해 임의로 추가한 "/api"를 제거한다.
최종적으로 프록시를 통해 "https://naveropenapi.apigw.ntruss.com/alpha/beta" 로 요청을 보내게 된다."
간단하다.
이전의 방식들과 같이 여러개의 proxy 구성을 붙일 수 있다. 조금 더 자세히 알기위해서는 공식홈페이지로 ㄱㄱ
Server Options | Vite (vitejs.dev)
Vite
Next Generation Frontend Tooling
vitejs.dev
댓글