Accès à localhost depuis l'extérieur : solutions TypeScript

Pourquoi localhost est une prison et comment s'en échapper

Vous lancez votre serveur sur localhost:3000, 127.0.0.1:5173 ou [::1]:8080 — tout fonctionne parfaitement. Jusqu'à ce que vous demandiez à un collègue ou un ami d'ouvrir votre projet. Et là, ça commence : « Page indisponible », « Connection refused », « ERR_CONNECTION_REFUSED ». Ça vous parle ?

Le problème, c'est que localhost (ou 127.0.0.1) est une interface de bouclage. Votre serveur écoute uniquement sur celle-ci. C'est comme crier dans une pièce vide : vous vous entendez, mais personne à l'extérieur ne vous entend. Dans cet article, nous allons voir comment transformer un serveur local en serveur public (ou au moins accessible sur le réseau local) avec TypeScript. Sans magie, uniquement des méthodes éprouvées.

Nous répondrons aux questions les plus fréquentes issues de Stack Overflow (où ce sujet a cumulé des milliers de vues) et fournirons des solutions prêtes à l'emploi pour Express, Node.js et Vite.

1. Les bases : que signifie « écouter sur toutes les interfaces » ?

Quand vous écrivez app.listen(3000) dans Express, le serveur écoute par défaut uniquement sur localhost. Pour autoriser l'accès depuis l'extérieur, vous devez spécifier 0.0.0.0 (toutes les interfaces IPv4) ou :: (toutes les interfaces IPv6).

Voici à quoi cela ressemble en TypeScript :

import express from 'express';\n\nconst app = express();\nconst PORT = 3000;\n\n// Écoute sur toutes les interfaces\napp.listen(PORT, '0.0.0.0', () => {\n  console.log(`Le serveur tourne sur http://0.0.0.0:${PORT}`);\n  console.log(`Accessible sur le réseau local via votre IP`);\n});\n

Désormais, le serveur est accessible non seulement sur localhost, mais aussi via l'IP locale de votre ordinateur (par exemple, 192.168.1.10:3000).

Comment trouver votre IP locale ?

\n
• Windows : ipconfig → cherchez l'adresse IPv4
\n
• macOS/Linux : ifconfig ou ip addr → ligne inet 192.168.x.x
\n

Mais ce n'est que la première étape. Souvent, le problème est plus profond : pare-feu, CORS, ou le fait que le serveur ne répond toujours pas depuis d'autres appareils.

2. CORS : pourquoi le navigateur bloque les requêtes ?

Même si vous avez ouvert l'accès réseau, le navigateur peut bloquer les requêtes provenant d'un autre domaine. C'est la politique CORS (Cross-Origin Resource Sharing). La solution consiste à configurer les en-têtes côté serveur.

Installez le package cors pour Express :

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

Intégrez-le dans votre serveur TypeScript :

import express from 'express';\nimport cors from 'cors';\n\nconst app = express();\n\n// Autorise toutes les origines (pour le développement)\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 activé, serveur accessible depuis l\'extérieur');\n});\n

Important : En production, n'utilisez pas origin: '*' — spécifiez les domaines autorisés.

3. Pare-feu : le bloqueur invisible

Même si le serveur écoute sur 0.0.0.0, votre pare-feu peut bloquer les connexions entrantes. C'est une raison fréquente pour laquelle l'accès depuis l'extérieur ne fonctionne pas.

Comment ouvrir un port (exemple sous Windows) :

\n
• Ouvrez le « Pare-feu Windows Defender »
\n
• Cliquez sur « Paramètres avancés »
\n
• Créez une règle pour le trafic entrant
\n
• Spécifiez le port (ex : 3000) et le protocole (TCP)
\n
• Autorisez la connexion
\n

Sous macOS/Linux, utilisez ufw ou iptables :

# Autoriser le port 3000 via ufw\nsudo ufw allow 3000/tcp\n

4. Problème avec le serveur Vite