라떼군 이야기
Vite + Docker 환경에서 'Blocked request. This host is not allowed' 에러 해결 방법
Problem
Docker Compose나 Nginx 프록시 환경에서 Vite로 구성된 React 애플리케이션을 실행할 때, 웹 페이지에 접속하면 Blocked request. This host ("frontend_web") is not allowed.라는 에러 메시지가 나타나며 화면이 차단되는 문제가 발생할 수 있습니다. 에러 메시지에서는 vite.config.js의 server.allowedHosts에 해당 호스트명을 추가하라고 안내합니다. 이를 해결하기 위해 vite-plugin-allowed-hosts와 같은 외부 플러그인을 시도해 보기도 하지만, Docker 컨테이너 빌드 과정에서 패키지 해석 에러(Failed to resolve entry for package)가 발생하며 빌드가 실패하는 등 개발 환경 구성에 어려움을 겪게 됩니다.
Background
이 문제는 Vite 6.0.11 버전 이후 도입된 보안 업데이트 때문에 발생합니다. 과거에는 Vite 개발 서버가 외부에서 들어오는 호스트 요청을 비교적 관대하게 허용했지만, DNS 리바인딩(DNS Rebinding) 공격과 같은 보안 취약점을 방어하기 위해 정책이 엄격하게 변경되었습니다. 이제 Vite 개발 서버는 기본적으로 localhost나 127.0.0.1을 통한 접근만 허용합니다. Docker Compose 환경에서는 서비스 이름(예: frontend_web)을 호스트명으로 사용하여 컨테이너 간 통신을 하거나 리버스 프록시를 거치게 되는데, 이 호스트명이 Vite의 기본 허용 목록에 없기 때문에 요청이 차단(Blocked request)되는 것입니다.
Solution
이 문제를 해결하려면 Vite 설정 파일(vite.config.js 또는 vite.config.ts)에서 server.allowedHosts 옵션을 명시적으로 구성해야 합니다. 외부 플러그인을 사용할 필요 없이 Vite의 기본 설정만으로 해결할 수 있습니다.
방법 1: 특정 호스트명만 허용하기 (권장)
보안을 유지하면서 Docker 컨테이너 이름이나 프록시 호스트명만 허용하는 가장 안전한 방법입니다.
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
// 에러 메시지에 나타난 차단된 호스트명을 배열에 추가합니다.
// 예: Docker Compose의 서비스명이 'frontend_web'인 경우
allowedHosts: ['frontend_web', 'your-custom-domain.local'],
},
});
방법 2: 모든 호스트 허용하기 (로컬 개발용)
로컬 개발 환경이고 보안 위험이 없는 격리된 네트워크라면, 모든 호스트를 허용하여 편리하게 설정할 수 있습니다.
// vite.config.js
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';
export default defineConfig({
plugins: [react()],
server: {
// true로 설정하면 Vite가 호스트명 검사를 수행하지 않습니다.
allowedHosts: true,
},
});
보너스: Angular 환경에서의 해결 방법
만약 Vite가 아닌 Angular를 사용 중이고 비슷한 프록시/Docker 환경에서 호스트 에러를 겪는다면, angular.json 파일을 수정하여 해결할 수 있습니다.
// angular.json
{
"projects": {
"your-app-name": {
"architect": {
"serve": {
"builder": "@angular-devkit/build-angular:dev-server",
"options": {
// 허용할 호스트명을 배열로 추가합니다.
"allowedHosts": ["localhost", "frontend_web", "your-domain.com"]
}
}
}
}
}
}
Deep Dive
allowedHosts를 true로 설정하는 것은 로컬 Docker 환경에서는 매우 편리하지만, 개발 서버가 공용 인터넷에 노출되는 환경(예: 클라우드 IDE, 포트 포워딩된 퍼블릭 서버)에서는 DNS 리바인딩 공격에 노출될 수 있으므로 주의해야 합니다. 프로덕션 환경에서는 보통 vite build를 통해 정적 파일을 생성하고 Nginx나 Apache로 서빙하므로 이 설정이 영향을 미치지 않습니다. 즉, 이 문제는 오직 vite dev 명령어를 사용하는 개발 서버 환경에만 국한된 보안 조치입니다. Docker 환경을 구성할 때는 개발용(docker-compose.dev.yml)과 운영용(docker-compose.prod.yml)을 분리하여, 개발 시에만 해당 옵션이 적용되도록 관리하는 것이 베스트 프랙티스입니다.
Conclusion
Vite 6.0.11 이후 버전에서 Docker나 프록시를 사용할 때 발생하는 ‘Blocked request’ 에러는 강화된 보안 정책으로 인한 정상적인 동작입니다. vite.config.js의 server.allowedHosts 옵션에 Docker 서비스명(예: frontend_web)을 배열로 추가하거나 true로 설정하여 간단히 해결할 수 있습니다. 개발 편의성과 보안을 고려하여 상황에 맞는 설정을 적용해 보세요.