如何从外部访问 localhost：TypeScript 解决方案

为什么 localhost 是一座监狱，以及如何逃离它

您在 localhost:3000、127.0.0.1:5173 或 [::1]:8080 上启动服务器——一切运行完美。直到您请同事或朋友打开您的项目。然后问题就来了：“页面不可用”、“连接被拒绝”、“ERR_CONNECTION_REFUSED”。熟悉吗？

问题在于，localhost（或 127.0.0.1）是一个回环接口。您的服务器只监听它。这就像在一个空房间里大喊：您能听到自己，但外面没有人能听到。在本文中，我们将探讨如何将本地服务器转变为公共服务器（或至少在本地网络中可访问），使用 TypeScript。没有魔法，只有经过验证的方法。

我们将回答来自 Stack Overflow 的最常见问题（该主题已有数千次浏览），并提供针对 Express、Node.js 和 Vite 的现成解决方案。

1. 基础：“监听所有接口”是什么意思？

当您在 Express 中编写 app.listen(3000) 时，服务器默认只监听 localhost。要允许外部访问，您需要指定 0.0.0.0（所有 IPv4 接口）或 ::（所有 IPv6）。

在 TypeScript 中如下所示：

import express from 'express';\n\nconst app = express();\nconst PORT = 3000;\n\n// 监听所有接口\napp.listen(PORT, '0.0.0.0', () => {\n  console.log(`服务器运行在 http://0.0.0.0:${PORT}`);\n  console.log(`可通过您的 IP 在本地网络中访问`);\n});\n

现在，服务器不仅可以在 localhost 上访问，还可以通过您计算机的 本地 IP（例如 192.168.1.10:3000）访问。

如何找到您的本地 IP？

\n
• Windows： ipconfig → 查找 IPv4 地址
\n
• macOS/Linux： ifconfig 或 ip addr → 查找 inet 192.168.x.x 行
\n

但这只是第一步。问题往往更深层——防火墙、CORS，或者服务器仍然无法从其他设备响应。

2. CORS：为什么浏览器会阻止请求？

即使您已通过网络开放访问，浏览器也可能阻止来自其他域的请求。这是 CORS（跨源资源共享）策略。解决方案是在服务器上配置标头。

为 Express 安装 cors 包：

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

在 TypeScript 服务器中引入：

import express from 'express';\nimport cors from 'cors';\n\nconst app = express();\n\n// 允许所有来源（用于开发）\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 已启用，服务器可从外部访问');\n});\n

重要提示： 在生产环境中不要使用 origin: '*'——请指定具体的域名。

3. 防火墙：无形的拦截器

即使服务器监听 0.0.0.0，您的防火墙也可能阻止传入连接。这是外部访问无法工作的常见原因。

如何开放端口（以 Windows 为例）：

\n
• 打开 “Windows Defender 防火墙”
\n
• 点击 “高级设置”
\n
• 创建 入站规则
\n
• 指定端口（例如 3000）和协议（TCP）
\n
• 允许连接
\n

在 macOS/Linux 上，使用 ufw 或 iptables：

# 通过 ufw 允许端口 3000\nsudo ufw allow 3000/tcp\n

4. Vite 服务器的问题