当前位置：首页 > news >正文

本地全栈项目想让别人看到，只能买云服务器部署吗？

news 2026/5/29 10:32:19

前后端都调通了，功能跑得好好的，兴冲冲把地址发给客户看——结果对方在外网，根本打不开。只能老老实实去买云服务器、申请域名、配置备案、部署前后端，一通操作下来大半天过去了，本来半天能搞定的事变成两天。

这是全栈开发里最常见的尴尬：功能已经有了，但交付方式还停留在"在我电脑上才能看"。买云服务器是一条路，但成本不低，备案周期也长，对于只是想让客户临时看一眼效果的需求来说，杀鸡用牛刀了。

其实有更简单的方案：不需要把后端部署到公网，只穿透前端，Vite 的 proxy 机制负责把前端页面的 API 请求转发到本地后端，外部用户看到的是前端页面，后端接口只有你自己的机器能访问到，既分享出去了，又保证了后端安全。cpolar 建一条指向前端端口的隧道，固定子域名绑定好，整个流程十分钟能跑通。

文章用 Spring Boot 2 + Vue 3 完整演示这个链路：前端 5173 端口，后端 8888 端口，Vite proxy 配置把/api请求转发到本地后端，cpolar 只穿透前端，前端页面公网可访问，后端始终留在本地。解决了"功能有了但没法分享"的核心痛点。

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小时左右自动更换一次域名地址，导致书签失效、分享链接频繁更新，长期使用极不便利。为解决这一问题，固定域名方式成为更优选择——只需升级任意付费套餐，即可绑定一个永久不变的专属域名，避免重复分享和重新配置的麻烦，显著提升使用体验与服务稳定性。

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

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