[지호] Vite Proxy 설정 - boostcampwm2023/web04-ALGOCEAN GitHub Wiki

현재 Post 요청을 보내면 CORS(Cross-Origin Resource Sharing) 에러가 뜬다.

물론 배포되어 있는 프론트엔드 서버와 백엔드 서버는 도메인이 같기 때문에 문제가 없지만, 개발하는 과정에 있어서 localhost에서의 프론트엔드 request 도메인과 서버 response 도메인은 다르기 때문에 api를 테스트 해 볼 수 없어 문제가 생긴다. 이를 해결하기 위해서 프론트엔드에서는 Vite에서 Proxy 설정을 하면 된다. (Vite를 빌드 도구로 사용했을 경우)

위의 그림과 같이 client 에서 axios를 사용하면 server에 요청하는 url이 변하고, proxy를 사용하면 개발 중에는 Vite 개발 서버가 클라이언트 코드에서 보내는 요청을 프록시로 중계하여 서버에 전달합니다.

vite.config.js

위와 같이 설정하면 /api로 시작하는 모든 요청을 target에 해당하는 url을 가리키도록 설정된다. 보통 백엔드 서버의 주소를 적는다. changeOrigin: true를 통해 원격 서버로 요청을 전달할 때, Origin 헤더를 변경하여 CORS 문제를 해결하고, cors: true를 통해 CORS 허용을 설정한다.