code-server代理Web服务完全指南如何快速访问你的React/Vue/Angular本地应用【免费下载链接】code-serverVS Code in the browser项目地址: https://gitcode.com/GitHub_Trending/co/code-servercode-server是一款运行在浏览器中的 VS Code 编辑器VS Code in the browser。除了写代码它还有一个新手容易忽略的宝藏功能内置 Web 服务代理。只要你的 React、Vue、Angular 本地开发服务跑在 code-server 所在机器上就能通过它安全地访问这些页面——无需配置复杂的端口转发还能自动复用 code-server 的登录鉴权。本文带你从原理到实战一步步掌握 code-server 代理 Web 服务的完整用法。为什么需要 code-server 代理远程开发时最尴尬的场景之一代码在服务器上跑着npm run dev但你本地浏览器根本连不上http://localhost:3000——因为 localhost 指的是你自己的电脑。code-server 的代理功能解决的就是这个问题零配置任何被监听中的端口都可以立即通过 URL 访问更安全代理请求自动走 code-server 的密码登录认证不暴露端口你只需要对外暴露 code-server 的 8080 端口其他服务端口如 3000、4200无需开放支持 WebSocket热更新HMR等依赖 WebSocket 的功能也能正常工作代理的两种访问方式子域名 vs 子路径code-server 提供两种代理模式核心逻辑分别在 domainProxy.ts 和 pathProxy.ts 中实现。方式一子路径代理最简单推荐新手直接在 URL 中加上/proxy/端口/http://你的域名/proxy/3000/比如你的 code-server 部署在dev.example.com本地有个服务跑在 3000 端口访问dev.example.com/proxy/3000/就能看到它。这种方式不需要改 DNS打开即用非常适合临时预览。方式二子域名代理体验最接近本地开发为你的域名配置一条泛解析记录*.域名然后用--proxy-domain启动参数code-server --proxy-domain 域名之后每个端口都有独立的子域名3000.dev.example.com # React 服务 4200.dev.example.com # Angular 服务子域名方式下你的应用就像跑在根路径一样几乎不需要修改任何前端配置这也是官方文档 docs/guide.md 中强烈推荐的方案。 两种方式的 WebSocket 代理都已内置热更新开箱即用。实战快速代理你的 React / Vue / Angular 应用如果你采用子路径方式前端框架往往需要知道自己跑在哪个路径下。这里 code-server 提供了第二个代理前缀/absproxy/端口/与/proxy不同的是/absproxy会把完整路径原样传给应用应用需要显式声明自己的 base 路径。 代理 React 应用create-react-appReact 项目必须使用/absproxy启动时通过环境变量告知应用和 webpack 当前路径PUBLIC_URL/absproxy/3000 \ WDS_SOCKET_PATH$PUBLIC_URL/sockjs-node \ BROWSERnone yarn start然后访问http://code-server地址/absproxy/3000即可。 代理 Vue 应用在项目根目录新建vue.config.js声明publicPathmodule.exports { devServer: { port: 3454, sockPath: sockjs-node, }, publicPath: /absproxy/3454, }启动npm run serve后访问code-server地址/absproxy/3454。 代理 Angular 应用Angular 只需要两处小改动在src/index.html中使用base href./.在package.json的ng serve命令中加上--serve-path /absproxy/4200访问code-server地址/absproxy/4200即可看到你的应用。更省事的办法直接用子域名方式--proxy-domain以上框架配置统统不需要改。进阶技巧定制你的代理行为用你自己的代理规则如果你已经有现成的反代比如 Nginx 的*.dev.example.com可以通过环境变量VSCODE_PROXY_URI让 code-server 的端口面板直接生成你的地址VSCODE_PROXY_URIhttps://{{port}}.kyle.dev{{port}}会被替换成实际端口号。相对路径写法VSCODE_PROXY_URI./proxy/{{port}}同样支持。CORS 预检请求被拦截开启密码认证后所有代理请求包括浏览器发出的 OPTIONS 预检请求都会要求登录而预检请求通常不带凭据可能导致跨域失败。加上这个参数即可放行所有预检请求code-server --skip-auth-preflight把 /absproxy 挂到子目录下如果你的 code-server 本身部署在非根路径例如http://my-code-server.com/user/123/workspace用--abs-proxy-base-path/user/123/workspace即可让应用通过code-server/user/123/workspace/absproxy/端口访问。一键禁用代理在安全敏感的场景下可以用--disable-proxy关闭所有端口代理路由也可设环境变量CS_DISABLE_PROXY1。详见 docs/FAQ.md。常见问题速查现象原因与解决访问/proxy/3000/提示 502 或连接失败目标端口上没有服务在运行React 页面样式错乱、资源 404没用/absproxy或未设置PUBLIC_URL热更新HMR不生效确认用的是 code-server 代理地址而非直连端口跨域预检被拦截启动时加--skip-auth-preflight未登录时访问应用被跳走这是正常行为代理请求会先走 code-server 登录总结场景推荐方案临时快速预览子路径/proxy/端口/长期开发 React/Vue/Angular子域名--proxy-domain框架无法修改配置/absproxy 框架 base 路径设置已有公司级反代VSCODE_PROXY_URI接管链接生成code-server 的代理功能把远程开发 本地预览这件繁琐的事变得非常简单一次登录所有端口即开即用。配合本文的框架配置清单你可以在几分钟内让 React、Vue、Angular 应用通过浏览器安全访问。更多细节可以查阅官方指南 docs/guide.md 中的 Accessing web services 章节以及代理核心实现 src/node/proxy.ts。【免费下载链接】code-serverVS Code in the browser项目地址: https://gitcode.com/GitHub_Trending/co/code-server创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考