《精讲Spring Boot后端跑另一个端口：如何解决暴露服务器问题》

做前后端分离项目时，很多人一到公网演示就容易想复杂。Vue前端跑在一个端口，Spring Boot后端跑在另一个端口，于是下意识觉得两个服务都要暴露出去，甚至还要分别准备域名。

但在开发和演示阶段，其实不一定要这么做。只要前端页面能够被外部访问，后端API完全可以继续留在本地，由前端开发服务器通过代理转发请求。这样外部用户访问的是前端公网地址，而后端仍然只被本机调用。

这也是Vite proxy在全栈开发里很实用的地方。浏览器请求/api时，表面上还是访问前端同一个域名，Vite会在本地把请求转发给Spring Boot的8888端口。这样既解决了跨域问题，也避免了后端接口直接暴露到公网。

本文会以一个Spring Boot 2 + Vue 3示例项目为基础，先完成本地前端启动、后端启动和接口联通测试，再讲清楚Vite代理的工作方式，以及为什么它能让公网用户间接访问本地后端能力。

最后再通过 cpolar 将Vue前端5173端口映射成HTTPS公网地址，并处理Vite访问域名限制、随机域名测试和固定二级子域名配置。这样就能用一个稳定公网链接完成全栈项目演示，而不用额外把后端端口开放出去。

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命令克隆至本地：

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

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

请求流转过程如下：

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?

• 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小时更换地址的烦恼.可以将这个链接添加到书签，稳定地分享给同事或朋友，也更适合用于演示或准生产环境。恭喜！你已顺利完成从免费随机域名到固定域名的升级，迈出了公网服务持久化部署的关键一步！

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

总结

完成配置后，这个Spring Boot 2 + Vue 3项目就可以通过公网HTTPS地址进行访问。外部用户打开的是Vue前端页面，页面中的接口请求则通过Vite proxy转发到本机运行的Spring Boot后端。

这套方案的关键，是把"公网入口"和"后端服务"分开处理。前端负责展示和接收用户请求，后端继续留在本地开发环境中运行，既方便热更新和调试，也减少了直接暴露API端口带来的风险。

配置 cpolar 后，前端开发服务器可以从外部网络访问。随机域名适合临时演示，固定二级子域名更适合长期联调，尤其是需要把链接发给同事、客户或测试人员时，会比每天更换地址更稳定。

需要注意的是，Vite的allowedHosts不要为了省事长期设置成完全放开。更推荐把实际使用的公网域名写入配置，只允许指定域名访问开发服务器，既能解决访问报错，也能减少不必要的安全暴露。

Vue负责公网页面入口，Vite proxy负责本地API转发，Spring Boot负责后端业务逻辑，cpolar负责补上HTTPS公网访问能力。当这几部分配合起来以后，全栈项目就能在不公开后端端口的情况下，完成一个更轻量、更安全的远程演示链路。