VSCode远程开发中的端口转发功能详解

轻敏同学_1931

轻敏同学_1931

2025-12-18

1182人浏览

原创

VSCode Remote-SSH端口转发通过SSH隧道将本地端口请求转发至远程服务,无需公网暴露或防火墙修改;支持命令面板和Remote Explorer两种添加方式,自动处理浏览器跳转与端口冲突,状态可视化管理,常见问题包括监听地址匹配、端口占用及会话生命周期依赖。

vscode远程开发中的端口转发功能详解

VSCode 的远程开发(Remote-SSH)中,端口转发是让本地机器访问远程服务器上运行的服务(比如 Web 服务、数据库、Jupyter Notebook)最常用也最实用的方式。它不依赖额外工具,配置简单,且能自动处理 SSH 隧道和浏览器跳转。

端口转发是怎么工作的

本质是通过已建立的 SSH 连接,在本地监听一个端口,把发往该端口的请求,经由 SSH 隧道转发到远程服务器的指定地址和端口。远程服务无需暴露在公网,也不用改防火墙规则——只要 SSH 连得上,就能“穿透”过去。

例如:远程服务器上启动了 http://localhost:3000 的前端开发服务,你在本地访问 http://localhost:3000,VSCode 就会自动把请求转过去,就像服务跑在你本机一样。

两种触发方式:命令面板 & 右键菜单

连接到远程主机后,有两处快捷入口:

  • 按 Ctrl+Shift+P(Win/Linux)或 Cmd+Shift+P(Mac),输入 Remote-SSH: Forward a Port…,回车后输入远程端口(如 3000),本地端口可留空(默认同远程端口)
  • 在 VSCode 左侧活动栏点击 远程资源管理器(Remote Explorer) → 展开 Forwarded Ports 区域 → 点击 + Add Port 按钮,填入远程端口和可选的本地端口

添加后,端口会显示在列表中,并附带“打开浏览器”和“复制链接”按钮,点一下就能直接访问。

Vue Wrap
Vue Wrap

Vue 入门指南 — JavaScript 框架

下载

端口转发的状态与管理

所有已转发的端口都会列在 Forwarded Ports 面板里,每条记录包含:

  • 远程地址:默认是 localhost,也可填 127.0.0.1 或其他监听地址(需服务本身允许)
  • 远程端口:服务实际监听的端口(如 5432、8888)
  • 本地端口:你在本地访问的端口(可与远程不同,比如远程 8888 → 本地 9999)
  • 状态图标:绿色表示已成功建立隧道;灰色表示未激活;红色表示连接失败(常见于远程端口没服务、被占用或权限问题)

右键某条转发项,可选择 Remove Forwarded Port 停止转发,或 Change Local Port 修改本地映射端口。

常见问题与注意事项

端口转发看着简单,但几个细节容易卡住:

  • 远程服务必须监听 localhost 或 127.0.0.1:如果服务绑定了 0.0.0.0 或具体 IP,通常也能转发;但如果只监听 127.0.0.1,而你填了远程地址为 server-ip,就会失败——保持地址一致即可
  • 本地端口被占用会自动递增:比如你想转发远程 3000 到本地 3000,但 3000 已被占用,VSCode 会悄悄改成 3001 并提示,注意看通知栏
  • 关闭 VSCode 或断开 SSH 后转发自动停止:不需要手动清理,但也意味着重启后要重新添加(可配合 settings.json 中 "remote.SSH.defaultForwardedPorts" 预设常用端口)
  • 浏览器跨域或 CORS 一般不影响:因为请求发到本地端口,再由 SSH 隧道代为发出,对浏览器来说就是同源请求

基本上就这些。用熟了,几秒就能把远程的 Flask、Vue Dev Server、PostgreSQL Admin 页面调出来,比配反向代理或改 hosts 实在太多。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
flask框架如何搭建
flask框架如何搭建

搭建步骤:1、安装Python和Pip;2、创建虚拟环境;3、安装Flask;4、创建Flask应用;5、运行应用;6、访问应用。想了解更多flask框架的相关内容,可以阅读本专题下面的文章。

2024.06.27

3935

8

Python Flask框架
Python Flask框架

本专题专注于 Python 轻量级 Web 框架 Flask 的学习与实战,内容涵盖路由与视图、模板渲染、表单处理、数据库集成、用户认证以及RESTful API 开发。通过博客系统、任务管理工具与微服务接口等项目实战,帮助学员掌握 Flask 在快速构建小型到中型 Web 应用中的核心技能。

2025.08.25

6044

10

Python Flask Web框架与API开发
Python Flask Web框架与API开发

本专题系统介绍 Python Flask Web框架的基础与进阶应用,包括Flask路由、请求与响应、模板渲染、表单处理、安全性加固、数据库集成(SQLAlchemy)、以及使用Flask构建 RESTful API 服务。通过多个实战项目,帮助学习者掌握使用 Flask 开发高效、可扩展的 Web 应用与 API。

2025.12.15

316

16

json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2195

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

3482

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1156

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3999

7

vscode是什么_vscode怎么安装配置
vscode是什么_vscode怎么安装配置

VS Code(Visual Studio Code)是一款免费、开源的跨平台代码编辑器,由微软开发和维护。它被广泛用于软件开发和编程,支持多种编程语言和框架。VS Code 同时提供了丰富的功能和扩展性,使开发者可以高效地编写、编辑和调试代码。

2023.06.30

1475

18

vscode怎么运行代码
vscode怎么运行代码

vscode是一个运行于MacOS X、Windows和Linux之上的,针对于编写现代Web和云应用的跨平台源代码编辑器;vscode免费而且功能强大,对JavaScript和NodeJS的支持非常好,自带很多功能,例如代码格式化,代码智能提示补全、Emmet插件等。php中文网给大家带来了相关的教程以及文章,欢迎大家前来阅读学习。

2023.07.21

3152

3

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Python uv官方安装与入门文档
Python uv官方安装与入门文档

共0课时 | 0人学习

Buffalo框架快速入门指南
Buffalo框架快速入门指南

共0课时 | 0人学习

Valgrind支持平台说明
Valgrind支持平台说明

共0课时 | 0人学习