Spring Boot + Vue 3 全栈项目，内网穿透实现 HTTPS 公网访问，前后端分离部署方案

数据一个全栈项目前端用 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演示项目来进行演示项目所需环境如下JDK11Maven3.6Nodejs18请确保您的电脑上拥有如上环境可在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: NoAccess-Control-Allow-Originheader 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:5173Vite 检测到路径匹配/api根据代理规则将请求转发到http://localhost:8888后端Spring Boot处理逻辑并返回结果Vite 再将响应结果返回给浏览器。整个过程中后端始终只被你的本机访问外网用户无法直接访问 8888 端口。这不仅保证了安全性也使得前后端通信过程对外部用户“透明”。3.3 Proxy 配置示例vite.config.js在前端项目根目录下的vite.config.js文件中我们可以添加如下配置import{defineConfig}fromviteimportvuefromvitejs/plugin-vueexportdefaultdefineConfig({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值如果在前面使用的为第二种方式即allowedHoststrue方式则可以跳过该步骤修改后保存文件然后访问固定好的域名进行测试访问成功你现在拥有了一个永久不变的专属域名彻底告别了每24小时更换地址的烦恼.可以将这个链接添加到书签稳定地分享给同事或朋友也更适合用于演示或准生产环境。恭喜你已顺利完成从免费随机域名到固定域名的升级迈出了公网服务持久化部署的关键一步至此你已顺利完成从免费随机域名到固定域名的升级为前端服务的公网访问提供了更强的稳定性与可用性。总结至于具体细节问题比如怎么配置 HTTPS 证书、怎么做负载均衡、怎么优化传输速度这些就留给大家根据自己的场景去调整了。毕竟 cpolar 的生态很成熟支持自定义域名、固定公网地址、流量统计等功能关键是先把前后端分离部署这套流程跑通。如果你也在开发全栈项目或者想给自己本地部署的系统提供公网访问能力建议花点时间研究一下 cpolar。配置起来其实不难前端几行 proxy 配置后端什么都不用改省下来的精力可以用来优化代码或者干脆躺平看数据增长。