若依 (RuoYi-Vue) 框架结合 Cloudflare Tunnel 实现公网访问
本文最后更新于54 天前,其中的信息可能已经过时,如有其他问题请留言
AI智能摘要
API请求失败,HTTP状态码: 500

使用cftunnel(cloudflared)做内网穿透,无需公网 IP、无需路由器端口映射、无需备案域名,一键生成 HTTPS 公网地址; 架构链路: 公网浏览器 → Cloudflare全球节点 → cftunnel客户端(本机出站连接) → 本机8080若依后端 前端打包后直接对接隧道 HTTPS 域名,无 Nginx 也可运行。

环境说明

  • 后端:RuoYi-Vue 3.9.2 SpringBoot 单体后端,端口 8080
  • 前端:Vue2 若依管理前端
  • 穿透工具:cloudflared (cftunnel)
  • 系统:Windows 10/11

第一步:后端 SpringBoot 配置开放全网访问

1. 修改 application.yml 核心配置

默认 Tomcat 仅监听127.0.0.1,仅本机可访问,必须绑定0.0.0.0接收所有 IP 请求:

# 开发环境配置
server:
  # 后端服务端口
  port: 8080
  # 关键配置:监听所有网卡地址,允许局域网/穿透流量接入
  address: 0.0.0.0
  servlet:
    # 项目访问根路径
    context-path: /
  tomcat:
    uri-encoding: UTF-8
    accept-count: 1000
    threads:
      max: 800
      min-spare: 100

2.防盗链白名单添加隧道域名

若依自带 referer 防盗链拦截,必须把穿透生成的域名加入白名单,否则静态资源、接口会被拦截:

# 防盗链配置
referer:
  enabled: false
  # 追加你的trycloudflare公网域名
  allowed-domains: localhost,127.0.0.1,ruoyi.vip,www.ruoyi.vip,covering-knows-formation-ssl.trycloudflare.com

3.重启后端并验证监听状态

  1. 完全关闭旧 Java 进程(任务管理器结束java.exe,热部署不会重载 server.address 配置)
  2. 重新启动 jar 包
  3. CMD 执行命令校验监听地址:

cmd

netstat -ano | findstr ":8080"

✅ 正常输出:TCP 0.0.0.0:8080 0.0.0.0:0 LISTENING

❌ 异常:出现127.0.0.1:8080代表配置未生效,需要彻底重启程序

第二步:前端 Vue 生产环境适配公网穿透地址

1. 修改生产环境配置文件.env.production

若依前端默认使用/prod-api本地代理前缀,生产环境代理失效,直接替换为穿透 HTTPS 域名:

env

# 页面标题
VUE_APP_TITLE = 校园图书管理系统
# 生产环境标记
ENV = 'production'
# 注释掉本地代理前缀
# VUE_APP_BASE_API = '/prod-api'
# 填写cftunnel生成的完整HTTPS公网域名
VUE_APP_BASE_API = 'https://covering-knows-formation-ssl.trycloudflare.com'

重点说明:vue.config.js中的devServer.proxy仅本地开发生效,打包生产环境完全不会执行这段代理逻辑,无需修改此文件。

第三步:安装并启动 Cloudflare Tunnel 内网穿透

官网地址: cftunnel — 全协议内网穿透工具 | Cloud + Relay 双模式

1. 工具安装

  1. 官网下载cloudflared Windows 程序:https://github.com/cloudflare/cloudflared/releases
  2. cloudflared.exe重命名为cftunnel.exe,放到系统环境变量目录(如C:\Windows\System32),或直接在 exe 所在目录打开 CMD。

2. 启动穿透(管理员 CMD 运行)

直接转发本机 8080 后端服务,命令:

cmd

cftunnel tunnel --url http://127.0.0.1:8080

常用命令

cftunnel quick 80

3. 启动成功标识

终端会输出一段随机 HTTPS 域名,示例:

https://covering-knows-formation-ssl.trycloudflare.com

出现Connection established代表隧道长连接建立成功,不要关闭 CMD 窗口(关闭即隧道断开)。

整理资料不易,觉得有帮助可以投喂下博主哦~感谢!
作者:Hueil
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-SA 4.0 协议
转载请注明 文章地址 及 作者 哦~
暂无评论

发送评论 编辑评论


                
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇