Como abrir acesso ao localhost externamente: soluções TypeScript

Por que o localhost é uma prisão e como escapar dela

Você inicia o servidor em localhost:3000, 127.0.0.1:5173 ou [::1]:8080 — tudo funciona perfeitamente. Até pedir a um colega ou amigo para abrir seu projeto. E então começa: «Página indisponível», «Connection refused», «ERR_CONNECTION_REFUSED». Familiar?

O problema é que localhost (ou 127.0.0.1) é uma interface de loopback. Seu servidor escuta apenas nela. É como gritar em uma sala vazia: você se ouve, mas ninguém lá fora ouve. Neste artigo, vamos explorar como transformar um servidor local em público (ou pelo menos acessível na rede local) usando TypeScript. Sem mágica, apenas métodos comprovados.

Responderemos às perguntas mais frequentes do Stack Overflow (onde este tópico acumulou milhares de visualizações) e forneceremos soluções prontas para Express, Node.js e Vite.

1. Básico: o que significa "ouvir em todas as interfaces"?

Quando você escreve app.listen(3000) no Express, o servidor por padrão escuta apenas em localhost. Para permitir o acesso externo, é necessário especificar 0.0.0.0 (todas as interfaces IPv4) ou :: (todas as IPv6).

Veja como fica em TypeScript:

import express from 'express';\n\nconst app = express();\nconst PORT = 3000;\n\n// Ouvindo em todas as interfaces\napp.listen(PORT, '0.0.0.0', () => {\n  console.log(`Server is running on http://0.0.0.0:${PORT}`);\n  console.log(`Acessível na rede local pelo seu IP`);\n});\n

Agora o servidor está acessível não apenas em localhost, mas também pelo IP local do seu computador (por exemplo, 192.168.1.10:3000).

Como descobrir seu IP local?

\n
• Windows: ipconfig → procure o endereço IPv4
\n
• macOS/Linux: ifconfig ou ip addr → linha inet 192.168.x.x
\n

Mas este é apenas o primeiro passo. Muitas vezes o problema é mais profundo — firewall, CORS ou o fato de o servidor ainda não responder de outros dispositivos.

2. CORS: por que o navegador bloqueia requisições?

Mesmo que você tenha aberto o acesso pela rede, o navegador pode bloquear requisições de outro domínio. Isso é a política de CORS (Cross-Origin Resource Sharing). A solução é configurar os cabeçalhos no servidor.

Instale o pacote cors para Express:

npm install cors\nnpm install @types/cors --save-dev\n

Conecte no servidor TypeScript:

import express from 'express';\nimport cors from 'cors';\n\nconst app = express();\n\n// Permitir todas as origens (para desenvolvimento)\napp.use(cors({\n  origin: '*',\n  methods: ['GET', 'POST', 'PUT', 'DELETE'],\n  allowedHeaders: ['Content-Type', 'Authorization']\n}));\n\napp.listen(3000, '0.0.0.0', () => {\n  console.log('CORS ativado, servidor acessível externamente');\n});\n

Importante: Em produção, não use origin: '*' — especifique domínios concretos.

3. Firewall: o bloqueador invisível

Mesmo que o servidor escute em 0.0.0.0, seu firewall pode bloquear conexões de entrada. Esta é uma causa comum pela qual o acesso externo não funciona.

Como abrir a porta (exemplo no Windows):

\n
• Abra o «Firewall do Windows Defender»
\n
• Clique em «Configurações avançadas»
\n
• Crie uma regra para conexão de entrada
\n
• Especifique a porta (exemplo: 3000) e o protocolo (TCP)
\n
• Permita a conexão
\n

No macOS/Linux, use ufw ou iptables:

# Permitir a porta 3000 via ufw\nsudo ufw allow 3000/tcp\n

4. Problema com o servidor Vite<