Spring Boot 2 + Vue 3 全栈项目内网穿透实战:HTTPS 公网访问方案

前言

在全栈开发中,前端和后端通常运行在不同端口,这让很多开发者和客户产生误解:是否需要将后端也暴露到公网,或者为前端和后端各自申请域名?实际上,这并非必须。通过 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

参考图如下:
image-20251010114112196

接下来需要将项目下载至本地也可以使用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(前端)两个项目:

image-20251010114809055

2 项目启动及访问测试

2.1 前端Vue项目启动

进入frontend文件夹(即前端vue项目目录中),在地址栏处输入cmd回车:

image-20251010121759491

接着,输入如下命令,进行安装前端项目依赖:

npm install

image-20251010121921900

安装完成后,输入如下命令,启动项目:

npm run dev

image-20251010140945813

可以看到,项目成功启动,输出了多个访问地址,以local为例,在浏览器中访问如下地址:

http://localhost:5173/

image-20251010141100738

可以看到成功访问到了前端页面!只是提示 服务器异常,请稍后重试。 这是因为只启动了前端,并没有启动后端,这是正常的。

2.2 后端SpringBoot项目启动

进入到backend文件夹中(即后端项目目录),同样在地址栏中输入cmd回车,打开cmd窗口:
image-20251010122444462

接着输入如下命令,启动SpringBoot项目:

mvn spring-boot:run

image-20251010122640416

启动成功,可以看到后端项目成功运行在8888的端口上!

在后端控制器中,定义了一个test接口,接口中会返回 msg、timestamp、status、requestCount几个字段:
image-20251010133930889返回示例如下:

{
  "msg": "操作成功",
  "timestamp": "2025-01-01 12:00:00",
  "status": "success",
  "requestCount": 1
}

接下来,在浏览器中刷新一下前端页面,查看页面是否正常,能否获取到后端test接口响应的内容:
image-20251010141151142

可以看到,成功返回了后端接口的内容,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) 限制, 如下图:
image-20251011120921179

报错提示:

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 不会直接把它发送到公网,而是在本地服务器中转并转发到目标后端服务

下面这张图展示了外网访问到本地后端的完整流程:

image-20251011121005349

请求流转过程如下:

  1. 浏览器访问公网地址(例如 https://xxx.cpolar.top/api/test);
  2. 该请求通过 cpolar 隧道到达你本地的前端开发服务器(localhost:5173);
  3. Vite 检测到路径匹配 /api,根据代理规则将请求转发到 http://localhost:8888
  4. 后端(Spring Boot)处理逻辑并返回结果;
  5. 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?

image-20250910114418412

  • cpolar 是一款内网穿透工具,可以将你在局域网内运行的服务(如本地 Web 服务器、SSH、远程桌面等)通过一条安全加密的中间隧道映射至公网,让外部设备无需配置路由器即可访问。
  • 广泛支持 Windows、macOS、Linux、树莓派、群晖 NAS 等平台,并提供一键安装脚本方便部署。

4.2 下载cpolar

打开cpolar官网的下载页面:https://www.cpolar.com/download
点击立即下载 64-bit按钮,下载cpoalr的安装包:

image-20250815171202537

下来下来是一个压缩包,解压后执行目录种的应用程序,一路默认安装即可,安装完成后,打开cmd窗口输入如下命令确认安装:

cpolar version

image-20250815171446129

出现如上版本即代表安装成功!

4.3 注册及登录cpolar web ui管理界面

4.3.1 注册cpolar

官网链接:https://www.cpolar.com/

访问cpolar官网,点击免费注册按钮,进行账号注册

image-20250804085039567

进入到如下的注册页面进行账号注册:
image-20250804085208319

4.3.2 访问web ui管理界面

注册完成后,在浏览器中输入如下地址访问 web ui管理界面:

http://127.0.0.1:9200

image-20250815171734046

输入刚才注册好的cpolar账号登录即可进入后台页面:

image-20250815171846757

4.4 穿透前端Vue项目的Web界面

4.4.1 随机域名方式(免费方案)

随机域名方式适合预算有限的用户。使用此方式时,系统会每隔 24 小时 左右自动更换一次域名地址。对于长期访问的不太友好,但是该方案是免费的,如果您有一定的预算,可以查看大纲4.4.2固定域名方式,且访问更稳定

首先,点击左侧菜单栏的隧道管理,展开进入隧道列表页面,页面下默认会有 2 个隧道:

  • remoteDesktop隧道,指向3389端口,tcp协议
  • website隧道,指向8080端口,http协议(http协议默认会生成2个公网地址,一个是http,另一个https,免去配置ssl证书的繁琐步骤)

image-20250914174356363

点击编辑website的隧道,修改成我们前端Vue项目需要的信息:

image-20251010140129969

接着来到在线隧道列表,可以看到名称为vue-demo-5173隧道的两条记录信息,一条协议为http,另一条协议为https:
image-20251010140241159

以https为例,访问测试:

image-20251010141513958

这是因为在本地的vite.config.js中没有允许该域名访问,所以我们需要打开前端Vue目录,进行修改一下该文件,如下图内容:

第一种方式:

image-20251010143034931

将穿透的域名,填写至PUBLIC_DOMAIN变量中保存即可。或者直接将allowedHosts的值修改为true,如下图:

第二种方式:

image-20251010142458118

不过更推荐第一种方式(即填写指定域名),只允许Vite 开发服务器接受来自指定主机名的请求(更加安全)!

接着,再次访问一下穿透的域名进行测试:
image-20251010143212541

可以发现,成功的访问到了页面,且能够正常和后端进行通信!

4.4.2 固定域名方式(升级任意套餐皆可)

通过前面的配置,我们已经成功实现了前端Vue项目的公网访问。然而,免费随机域名方案的局限性也随之显现:系统每24小时左右自动更换一次域名地址,导致书签失效、分享链接频繁更新,长期使用极不便利。为解决这一问题,固定域名方式成为更优选择——只需升级任意付费套餐,即可绑定一个永久不变的专属域名,避免重复分享和重新配置的麻烦,显著提升使用体验与服务稳定性。

好了,接下来开始固定保留二级子域名教程!创建一个专属于你的二级域名吧!

首先,进入官网的预留页面:

https://dashboard.cpolar.com/reserved

选择预留菜单,即可看到保留二级子域名项,填写其中的地区名称描述(可不填)项,然后点击保留按钮,操作步骤图如下:

image-20251010150112389

列表中显示了一条已保留的二级子域名记录:

  • 地区:显示为China Top
  • 二级域名:显示为testdemo

注:二级域名是唯一的,每个账号都不相同,请以自己设置的二级域名保留的为主

接着,进入侧边菜单栏的隧道管理下的隧道列表,可以看到名为vue-demo-5173的隧道,点击编辑按钮进入编辑页面:

image-20251010150407152

来到状态菜单下的在线隧道列表可以看到隧道名称为vue-demo-5173的公网地址已经变更为二级子域名+固定域名主体及后缀的形式了:

image-20251010150449166

接下来,需要再次修改vite.config.js文件中的PUBLIC_DOMAIN值,如果在前面使用的为第二种方式(即allowedHosts:true方式)则可以跳过该步骤:

image-20251010150838806

修改后保存文件,然后访问固定好的域名进行测试:

image-20251010150925952

访问成功!你现在拥有了一个永久不变的专属域名,彻底告别了每24小时更换地址的烦恼.可以将这个链接添加到书签,稳定地分享给同事或朋友,也更适合用于演示或准生产环境。恭喜!你已顺利完成从免费随机域名到固定域名的升级,迈出了公网服务持久化部署的关键一步!

至此,你已顺利完成从免费随机域名到固定域名的升级,为前端服务的公网访问提供了更强的稳定性与可用性。

总结

从本地开发到公网可访问,从随机域名到固定专属链接,我们一步步实现了全栈项目的极简部署。在这一过程中,并不需要将后端服务暴露在公网上,也无需为前后端分别配置独立的穿透隧道 。通过 cpolar 的 Web UI 管理界面,我们可以轻松创建指向前端 Vue 项目(如 5173 端口)的 HTTPS 隧道,实现一键公网访问。而 Vite 内置的代理功能(server.proxy)则确保了所有 /api 请求能安全地转发至本地运行的后端服务(如 Spring Boot 的 localhost:8888),整个通信过程由开发者本机完成 。

这意味着:

  • 前端可以被全球用户通过 HTTPS 安全访问;
  • 后端仍保留在本地环境,无需任何公网暴露,保障数据与接口安全;
  • 开发者既能享受热更新、实时调试的便利,又能快速分享完整功能给团队或客户。

不仅如此,通过升级 cpolar 套餐并配置固定域名,还能彻底告别每 24 小时更换一次地址的困扰,获得稳定、持久、可收藏的公网链接,适用于演示、协作甚至准生产场景。这不仅仅是一次内网穿透的技术实践,更是一种高效、安全、低成本的全栈开发协作模式。无论你是独立开发者、学生项目组,还是需要快速验证产品的创业团队,这套方案都能让你在几分钟内完成“开发 → 调试 → 分享”的闭环。


感谢您阅读本篇文章,有任何问题欢迎留言交流。cpolar官网 – 安全的内网穿透工具 | 无需公网IP | 远程访问 | 搭建网站

Share:

发表回复

目录

On Key

推荐文章