数据：一个全栈项目，前端用 Vue 3，后端用 Spring Boot，默认情况下它们跑在不同的端口上——前端 5173，后端 8888。当你想在外网访问时，会遇到几个问题：能不能直接暴露后端端口？不行，安全风险太高。能不能直接暴露前端端口？可以，但无法访问后端 API，跨域问题卡死你。
我遇到过不少开发者在这个问题上踩坑。最直接的想法是把前后端都暴露在公网，但这样等于把后端数据库、API 接口直接暴露在互联网上，没有任何访问控制，简直是给黑客送上门。更糟的是，如果前端和后端端口不同，浏览器会报跨域错误，CORS policy 一飘，开发进度直接停摆。
cpolar 的出现，就是为了解决这个问题。它是个内网穿透工具，支持将本地服务映射到公网地址。关键是，它只需要暴露前端端口，后端依然藏在局域网里，通过前端的 proxy 配置，把 API 请求转发到本地后端。这样既保证了安全性，又实现了公网访问，而且支持 HTTPS 加密传输。
我之前在本地搭建了一个 Spring Boot 2 + Vue 3 的全栈项目，通过 cpolar 实现前后端分离部署。配置好 Vite 的 proxy 规则后，前端跑在 cpolar 的 HTTPS 地址上，所有/api开头的请求自动转发到本地后端 8888 端口。这样，用户通过浏览器访问 cpolar 提供的公网地址，就能正常操作前端界面，同时后端 API 也在局域网里安全运行。
本文使用的示例项目已在Gitee开源，您可以直接获取完整代码进行学习和实践。
1 环境及项目准备
本部分将使用一个已经编写好的Spring Boot 2 + Vue 3的一个demo演示项目来进行演示，项目所需环境如下：
- JDK11+
- Maven3.6+
- Nodejs18+
请确保您的电脑上拥有如上环境，可在cmd中进行测试版本是否安装，测试命令如下：
#检查java环境版本信息java-version#检查maven环境版本信息mvn-v#检查nodejs版本及npm版本node-vnpm-v参考图如下：
接下来需要将项目下载至本地也可以使用git clone命令克隆至本地：
gitclone https://gitee.com/jun-wan/springboot-vue3-cpolar-demo.git将项目下载至本地后，进入目录，可以看到有backend(后端)和frontend(前端)两个项目：
2 项目启动及访问测试
2.1 前端Vue项目启动
进入frontend文件夹（即前端vue项目目录中），在地址栏处输入cmd回车：
接着，输入如下命令，进行安装前端项目依赖：
npminstall安装完成后，输入如下命令，启动项目：
npmrun dev可以看到，项目成功启动，输出了多个访问地址，以local为例，在浏览器中访问如下地址：
http://localhost:5173/可以看到成功访问到了前端页面！只是提示服务器异常，请稍后重试。这是因为只启动了前端，并没有启动后端，这是正常的。
2.2 后端SpringBoot项目启动
进入到backend文件夹中（即后端项目目录），同样在地址栏中输入cmd回车，打开cmd窗口：
接着输入如下命令，启动SpringBoot项目:
mvn spring-boot:run启动成功，可以看到后端项目成功运行在8888的端口上！
在后端控制器中，定义了一个test接口，接口中会返回msg、timestamp、status、requestCount几个字段：返回示例如下：
{"msg":"操作成功","timestamp":"2025-01-01 12:00:00","status":"success","requestCount":1}接下来，在浏览器中刷新一下前端页面，查看页面是否正常，能否获取到后端test接口响应的内容：
可以看到，成功返回了后端接口的内容，msg等字段都显示了内容，状态也为success，至此，前后端已经完美连上！
3 前端代理机制详解
在前面的步骤中，我们已经验证前后端都可以在本地正常运行，但浏览器是有“同源策略”的，当前端（5173端口）直接请求后端（8888端口）接口时，会出现跨域问题。此时，我们就需要使用Vite 的代理机制（proxy）来解决跨域，同时也让公网访问时保持后端安全。
3.1 为什么需要 Proxy？
在前后端分离的开发模式下，前端和后端通常运行在不同的端口上：
- 前端项目（Vue 3 + Vite）运行在：
http://localhost:5173 - 后端服务（Spring Boot）运行在：
http://localhost:8888
当浏览器从前端直接请求后端接口时，例如：
http://localhost:8888/api/test会立即触发浏览器的同源策略（Same-Origin Policy）限制， 如下图：
报错提示：
CORS policy: No'Access-Control-Allow-Origin'header is present on the requested resource.同源策略要求：协议、域名、端口必须完全一致，否则浏览器会阻止请求。
由于前端和后端端口不同（5173 ≠ 8888），属于“跨域请求”，因此被拦截。
要解决这个问题，我们可以让前端开发服务器（Vite）代理这些请求。即让浏览器只与前端通信，而前端服务器再代表浏览器去访问后端。
3.2 Proxy 的工作原理
Vite 的开发服务器在启动时，会根据配置文件中的server.proxy字段拦截以特定路径开头的请求（如/api）。
当浏览器发出请求时，Vite 不会直接把它发送到公网，而是在本地服务器中转并转发到目标后端服务。
下面这张图展示了外网访问到本地后端的完整流程：
请求流转过程如下：
- 浏览器访问公网地址（例如
https://xxx.cpolar.top/api/test）； - 该请求通过 cpolar 隧道到达你本地的前端开发服务器（
localhost:5173）； - Vite 检测到路径匹配
/api，根据代理规则将请求转发到http://localhost:8888； - 后端（Spring Boot）处理逻辑并返回结果；
- Vite 再将响应结果返回给浏览器。
整个过程中，后端始终只被你的本机访问，外网用户无法直接访问 8888 端口。
这不仅保证了安全性，也使得前后端通信过程对外部用户“透明”。
3.3 Proxy 配置示例（vite.config.js）
在前端项目根目录下的vite.config.js文件中，我们可以添加如下配置：
import{defineConfig}from'vite'importvuefrom'@vitejs/plugin-vue'exportdefaultdefineConfig({plugins:[vue()],server:{proxy:{// 将所有 /api 开头的请求代理到后端'/api':{target:'http://localhost:8888',// Spring Boot 后端地址changeOrigin:true,// 修改请求头中的源，防止被后端拒绝rewrite:(path)=>path.replace(/^\/api/,'')// 可选：去掉/api前缀}}}})4 穿透前端Vue项目支持HTTPS公网访问
在前面，我们已在本地成功启动并联通前后端，但访问范围仍局限于局域网。若希望外网用户也能安全访问你的应用，我们可以通过 cpolar 将本地前端服务映射到公网，并提供 HTTPS 访问；后端依旧保持在本地，由前端通过代理安全调用。相比自建云服务器，内网穿透上手更快、成本更低（含免费版），唯一不足是带宽有限，不过对本示例及中小流量场景已足够。下面开始配置 cpolar，为前端生成可直接访问的 HTTPS 地址。
4.1 什么是cpolar?
- cpolar 是一款内网穿透工具，可以将你在局域网内运行的服务（如本地 Web 服务器、SSH、远程桌面等）通过一条安全加密的中间隧道映射至公网，让外部设备无需配置路由器即可访问。
- 广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台，并提供一键安装脚本方便部署。
4.2 下载cpolar
打开cpolar官网的下载页面：
点击立即下载 64-bit按钮,下载cpoalr的安装包:
下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:
cpolar version出现如上版本即代表安装成功!
4.3 注册及登录cpolar web ui管理界面
4.3.1 注册cpolar
访问cpolar官网，点击免费注册按钮，进行账号注册
进入到如下的注册页面进行账号注册：
4.3.2 访问web ui管理界面
注册完成后,在浏览器中输入如下地址访问 web ui管理界面:
http://127.0.0.1:9200输入刚才注册好的cpolar账号登录即可进入后台页面:
4.4 穿透前端Vue项目的Web界面
4.4.1 随机域名方式(免费方案)
随机域名方式适合预算有限的用户。使用此方式时，系统会每隔24 小时左右自动更换一次域名地址。对于长期访问的不太友好，但是该方案是免费的，如果您有一定的预算，可以查看大纲4.4.2的固定域名方式，且访问更稳定。
首先，点击左侧菜单栏的隧道管理，展开进入隧道列表页面，页面下默认会有 2 个隧道：
- remoteDesktop隧道，指向3389端口，tcp协议
- website隧道，指向8080端口，http协议（http协议默认会生成2个公网地址，一个是http，另一个https，免去配置ssl证书的繁琐步骤）
点击编辑website的隧道，修改成我们前端Vue项目需要的信息：
接着来到在线隧道列表，可以看到名称为vue-demo-5173隧道的两条记录信息，一条协议为http,另一条协议为https:
以https为例，访问测试：
这是因为在本地的vite.config.js中没有允许该域名访问，所以我们需要打开前端Vue目录，进行修改一下该文件，如下图内容：
第一种方式：
将穿透的域名，填写至PUBLIC_DOMAIN变量中保存即可。或者直接将allowedHosts的值修改为true,如下图：
第二种方式：
不过更推荐第一种方式（即填写指定域名），只允许Vite 开发服务器接受来自指定主机名的请求（更加安全）！
接着，再次访问一下穿透的域名进行测试：
可以发现，成功的访问到了页面，且能够正常和后端进行通信！
4.4.2 固定域名方式（升级任意套餐皆可）
通过前面的配置，我们已经成功实现了前端Vue项目的公网访问。然而，免费随机域名方案的局限性也随之显现：系统每24小时左右自动更换一次域名地址，导致书签失效、分享链接频繁更新，长期使用极不便利。为解决这一问题，固定域名方式成为更优选择——只需升级任意付费套餐，即可绑定一个永久不变的专属域名，避免重复分享和重新配置的麻烦，显著提升使用体验与服务稳定性。
好了，接下来开始固定保留二级子域名教程！创建一个专属于你的二级域名吧！
首先，进入官网的预留页面:
https://dashboard.cpolar.com/reserved选择预留菜单，即可看到保留二级子域名项，填写其中的地区、名称、描述（可不填）项，然后点击保留按钮，操作步骤图如下：
列表中显示了一条已保留的二级子域名记录：
- 地区：显示为
China Top。 - 二级域名：显示为
testdemo。
注：二级域名是唯一的，每个账号都不相同，请以自己设置的二级域名保留的为主
接着，进入侧边菜单栏的隧道管理下的隧道列表，可以看到名为vue-demo-5173的隧道，点击编辑按钮进入编辑页面：
来到状态菜单下的在线隧道列表可以看到隧道名称为vue-demo-5173的公网地址已经变更为二级子域名+固定域名主体及后缀的形式了：
接下来，需要再次修改vite.config.js文件中的PUBLIC_DOMAIN值，如果在前面使用的为第二种方式（即allowedHosts：true方式）则可以跳过该步骤：
修改后保存文件，然后访问固定好的域名进行测试：
访问成功！你现在拥有了一个永久不变的专属域名，彻底告别了每24小时更换地址的烦恼.可以将这个链接添加到书签，稳定地分享给同事或朋友，也更适合用于演示或准生产环境。恭喜！你已顺利完成从免费随机域名到固定域名的升级，迈出了公网服务持久化部署的关键一步！
至此，你已顺利完成从免费随机域名到固定域名的升级，为前端服务的公网访问提供了更强的稳定性与可用性。
总结
至于具体细节问题，比如怎么配置 HTTPS 证书、怎么做负载均衡、怎么优化传输速度，这些就留给大家根据自己的场景去调整了。毕竟 cpolar 的生态很成熟，支持自定义域名、固定公网地址、流量统计等功能，关键是先把前后端分离部署这套流程跑通。
如果你也在开发全栈项目，或者想给自己本地部署的系统提供公网访问能力，建议花点时间研究一下 cpolar。配置起来其实不难，前端几行 proxy 配置，后端什么都不用改，省下来的精力可以用来优化代码，或者干脆躺平看数据增长。
