前言
在全栈开发中,前端和后端通常运行在不同端口,这让很多开发者和客户产生误解:是否需要将后端也暴露到公网,或者为前端和后端各自申请域名?实际上,这并非必须。通过 cpolar 内网穿透,我们只需将前端项目暴露到公网,前端内部通过本地 proxy 安全地访问本地后端 API,而后端依然保持在本地环境中安全运行。配合 HTTPS,用户就可以直接访问公网前端页面,无需额外穿透后端。本教程将手把手教你如何用 Spring Boot 2 + Vue 3 搭建全栈项目,并通过 cpolar 实现前端公网访问,让你快速完成可访问的 HTTPS 全栈项目部署,同时保持后端安全与本地调试的便利性。
本文使用的示例项目已在Gitee开源,您可以直接获取完整代码进行学习和实践:
- Gitee仓库:https://gitee.com/jun-wan/springboot-vue3-cpolar-demo
1 环境及项目准备
本部分将使用一个已经编写好的Spring Boot 2 + Vue 3
的一个demo演示项目来进行演示,项目所需环境如下:
- JDK11+
- Maven3.6+
- Nodejs18+
请确保您的电脑上拥有如上环境,可在cmd中进行测试版本是否安装,测试命令如下:
#检查java环境版本信息
java -version
#检查maven环境版本信息
mvn -v
#检查nodejs版本及npm版本
node -v
npm -v
参考图如下:
接下来需要将项目下载至本地也可以使用git clone
命令克隆至本地:
Gitee仓库地址:https://gitee.com/jun-wan/springboot-vue3-cpolar-demo
git clone https://gitee.com/jun-wan/springboot-vue3-cpolar-demo.git
将项目下载至本地后,进入目录,可以看到有backend(后端)
和frontend(前端)
两个项目:
2 项目启动及访问测试
2.1 前端Vue项目启动
进入frontend
文件夹(即前端vue项目目录中),在地址栏处输入cmd
回车:
接着,输入如下命令,进行安装前端项目依赖:
npm install
安装完成后,输入如下命令,启动项目:
npm run 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'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
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官网的下载页面:https://www.cpolar.com/download
点击立即下载 64-bit
按钮,下载cpoalr的安装包:
下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:
cpolar version
出现如上版本即代表安装成功!
4.3 注册及登录cpolar web ui管理界面
4.3.1 注册cpolar
官网链接:https://www.cpolar.com/
访问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小时更换地址的烦恼.可以将这个链接添加到书签,稳定地分享给同事或朋友,也更适合用于演示或准生产环境。恭喜!你已顺利完成从免费随机域名到固定域名的升级,迈出了公网服务持久化部署的关键一步!
至此,你已顺利完成从免费随机域名到固定域名的升级,为前端服务的公网访问提供了更强的稳定性与可用性。
总结
从本地开发到公网可访问,从随机域名到固定专属链接,我们一步步实现了全栈项目的极简部署。在这一过程中,并不需要将后端服务暴露在公网上,也无需为前后端分别配置独立的穿透隧道 。通过 cpolar 的 Web UI 管理界面,我们可以轻松创建指向前端 Vue 项目(如 5173 端口)的 HTTPS 隧道,实现一键公网访问。而 Vite 内置的代理功能(server.proxy
)则确保了所有 /api
请求能安全地转发至本地运行的后端服务(如 Spring Boot 的 localhost:8888
),整个通信过程由开发者本机完成 。
这意味着:
- 前端可以被全球用户通过 HTTPS 安全访问;
- 后端仍保留在本地环境,无需任何公网暴露,保障数据与接口安全;
- 开发者既能享受热更新、实时调试的便利,又能快速分享完整功能给团队或客户。
不仅如此,通过升级 cpolar 套餐并配置固定域名,还能彻底告别每 24 小时更换一次地址的困扰,获得稳定、持久、可收藏的公网链接,适用于演示、协作甚至准生产场景。这不仅仅是一次内网穿透的技术实践,更是一种高效、安全、低成本的全栈开发协作模式。无论你是独立开发者、学生项目组,还是需要快速验证产品的创业团队,这套方案都能让你在几分钟内完成“开发 → 调试 → 分享”的闭环。
感谢您阅读本篇文章,有任何问题欢迎留言交流。cpolar官网 – 安全的内网穿透工具 | 无需公网IP | 远程访问 | 搭建网站