Vite Docker Host Blocked Error Fix

Configure your Vite server to recognize your Docker hostname using the built-in allowedHosts option to resolve domain blocking issues in development environments.

Problem: Blocked Host in Docker Environment

When running a Vite application in Docker Compose, you may encounter this error:

Blocked request. This host ("frontend_web") is not allowed. 
To allow this host, add "frontend_web" to server.allowedHosts in vite.config.js.

Cause: Recent Vite updates (>=6.0.11, 5.4.12+, 4.5.6+) added security measures blocking non-localhost hosts by default. Docker generates custom hostnames (like frontend_web) that aren't automatically whitelisted.

Solution: Configure allowedHosts in Vite Config

Modify your vite.config.js/vite.config.ts to explicitly allow your Docker host. Avoid workarounds like vite-plugin-allowed-hosts - Vite now handles this natively.

Option 1: Specific Hosts (Recommended)

Allow only your Docker service name or development domains:

// vite.config.js
export default {
  server: {
    allowedHosts: ['frontend_web'] // Add your Docker hostname(s)
  }
}

// vite.config.ts
import { defineConfig } from 'vite'

export default defineConfig({
  server: {
    allowedHosts: ['frontend_web'] // Add your Docker hostname(s)
  }
})

Option 2: Allow All Hosts (Development Only)

For temporary local development:

server: {
  allowedHosts: true // ⚠️ Only use in secure networks
}

Full Docker-Compatible Configuration Example

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()],
  server: {
    host: true, // Listen on all network interfaces
    port: 3000,
    strictPort: true,
    allowedHosts: [
      'frontend_web', // Docker service name
      'localhost'    // Local development
    ]
  }
})

Key Considerations

1. Docker Networking: Use your exact Compose service name as shown in the error message
2. Security: Never use allowedHosts: true in production
3. Multi-Environment Setup: Manage hosts dynamically:

allowedHosts: process.env.DOCKER_MODE 
  ? ['frontend_web'] 
  : ['localhost']

4. Angular Differences: Angular projects require angular.json modifications instead (not covered here as this is Vite-specific)

Why This Works

The configuration explicitly authorizes your Docker-generated hostname to bypass Vite's security checks during development. This maintains protection against DNS rebinding attacks while accommodating container-based workflows.

Maintenance Note

Vite consolidates host validation logic in server.allowedHosts. Avoid deprecated solutions like --disable-host-check flags or external plugins.