VS Code 怎样用端口转发查看本地服务

想让别人临时访问本机正在运行的 Web 服务，可以直接在 VS Code 的 Ports 面板中选择 Forward a Port，输入服务端口，等待列表出现 Forwarded Address。默认转发是 Private，访问者需要用启动转发时使用的同一 GitHub 或 Microsoft 账号登录；只有明确选择 Public，拿到链接的人才不需要登录。

官方地址：https://code.visualstudio.com/docs/debugtest/port-forwarding

先准备本地服务并打开 Ports 面板

端口转发的前提是本机已经有服务监听端口。没有现成项目时，可以在一个临时目录里启动简单的静态服务：

# 在包含静态文件的目录启动本地服务，示例端口为 3000
npx serve -l 3000

回到 VS Code，打开命令面板，执行 Ports: Focus on Ports View；也可以在底部 Panel 区域切换到 Ports。第一次使用端口转发时，VS Code 可能要求登录 GitHub。这里的重点不是打开一个新浏览器窗口，而是确认 Ports 面板已经准备好接收端口。

用 Forward a Port 建立转发

在 Ports 面板点击 Forward a Port，输入本地服务实际监听的端口，例如 3000，按回车确认。端口号必须和服务绑定的端口一致；如果服务实际运行在 5173，却填写 3000，转发条目可能出现，但打开后不会得到预期页面。

成功后，Ports 列表会新增一行端口，并显示 Forwarded Address。悬停在地址上，可以使用复制地址、在浏览器打开或在编辑器内预览等操作。读者把地址交给同事前，先看这一行是否已经从“只显示本地端口”变成“同时有转发地址”。

按访问对象选择端口可见性

在端口行上打开右键菜单，选择 Port Visibility。Private 适合自己或团队成员验证，访问转发地址时需要使用同一账号认证；Public 适合临时展示不含敏感数据的测试页面，但任何拿到链接的人都可能访问。

如果只是想让同事帮忙看页面，优先保留 Private，并让对方完成账号登录。只有在确实需要免登录访问时才选择 Public。不要把带有内部接口、调试信息、测试账号或用户数据的服务直接设为 Public。

用状态和安全边界做结果核对

发布地址前按下面四项快速核对：端口行中的数字与本地服务一致；Forwarded Address 可以复制；当前可见性符合访问对象；页面不包含不应暴露的配置、日志或数据。端口转发通过 VS Code 的开发隧道服务建立出站连接，通常不需要手动改防火墙，也不会在本机额外设置网络监听器，但这不等于 Public 服务天然安全。

使用结束后，在对应端口行的菜单中选择 Stop Port。停止后，Ports 列表不再保留该转发地址；本地服务是否继续运行取决于你是否另外停止了服务进程。两件事不要混为一谈：Stop Port 只撤销转发，不能替代关闭本地开发服务。

相关问题

为什么转发后仍然打不开页面？

先确认输入的端口与服务实际监听端口相同，再确认 Ports 行已经出现 Forwarded Address。若服务只绑定了特殊地址或本身没有正常响应，转发地址也不会自动修复应用问题。

Private 和 Public 应该怎么选？

需要身份控制时选 Private；只对外展示无敏感内容的临时页面才考虑 Public。Public 链接应当视为可扩散地址。

停止转发会关闭本地服务吗？

不会。Stop Port 只停止端口转发；要结束本地服务，还需要在启动它的任务、终端或调试流程中单独停止。