feat(h5): H5 交给后端托管 + 修掉"相对地址在 uni.request 下失败"
背景:配好了花生壳穿透 http://394nb68658le.vicp.fun → 本机 8080。 但 H5 原来跑在 127.0.0.1:5174,手机访问不到 —— 所以把 H5 静态文件 交给后端一起服务(同一个域名)。这样顺带也不再需要 CORS, 而且正是正式部署的形态。 改动: · application-dev.yml 加 spring.web.resources.static-locations, 默认指向 frontend-mp/dist/build/h5/,可用 H5_STATIC_DIR 覆盖。 ⚠️ 前缀必须是 spring.(我一开始写成了 fill.,表现是"页面 404 而应用 照常启动、没有任何报错")。 · fill.mp-h5.callback-url / h5-base-url 改成穿透域名。 · config/index.ts:API 地址按端区分(api 地址两端策略不同,写死一个值 一定会在某一边出错): H5 → location.origin(绝对同源) 小程序 → http://localhost:8080(没有"同域"概念,必须绝对地址) 用 uni-app 条件编译区分,而不是运行期判断(后者会把两套地址都打进包里)。 ⚠️ 修掉一个只在真实穿透下才会暴露的 bug: · 原来 H5 硬编码 http://localhost:8080。从公网域名打开时变成跨域请求 → 被 CORS 拦 → 页面显示"网络请求失败",而**从本机打开却是好的**。这个 bug 只有走真实 穿透/真机才会暴露 —— 这正是"要在真环境验证"的价值。 · 改成相对路径后**仍然失败**(request:fail),但同样地址用原生 XHR / fetch 都是 200。也就是说这是 uni.request 自身对相对路径的处理差异,不是服务端 或跨域问题 —— 而它长得像"网络不通",很容易往 CORS / 域名 / 后端去查,白绕一大圈。 最终用 location.origin(绝对同源)绕开。 验证:经公网 http://394nb68658le.vicp.fun/?scene=t1-k17 → 显示「示范职业学校 / 2026年9月机电专业认定材料收集 / 尚未发布」, 无头浏览器截图确认(不依赖人工)。 ※ 首次加载约 27 秒 —— 穿透的带宽限制(花生壳免费档),不是代码问题。
This commit is contained in:
@@ -19,6 +19,16 @@ spring:
|
||||
flyway:
|
||||
# dev 允许 clean 后重建,方便反复试 DDL
|
||||
clean-disabled: false
|
||||
web:
|
||||
resources:
|
||||
# H5 静态文件位置。默认指向 uni-app 的 H5 构建产物;
|
||||
# 部署时用环境变量 H5_STATIC_DIR 指到实际目录即可,
|
||||
# **不需要把构建产物提交进仓库**(那是产物,不是源码)。
|
||||
# 开发前先在 frontend-mp 里跑一次 `pnpm build:h5`。
|
||||
#
|
||||
# ⚠️ 它的前缀是 spring.(不是 fill.)——写错前缀的表现是"页面 404
|
||||
# 而应用照常启动、没有任何报错",很难一眼看出来。
|
||||
static-locations: ${H5_STATIC_DIR:file:../frontend-mp/dist/build/h5/},classpath:/static/
|
||||
|
||||
mybatis-plus:
|
||||
configuration:
|
||||
@@ -71,12 +81,13 @@ fill:
|
||||
mp-h5:
|
||||
app-id: ${WX_H5_APP_ID:wx5d3ae5c1c21fef24}
|
||||
app-secret: ${WX_H5_APP_SECRET:0e0367fd39a968866a3c59f6c641dda2}
|
||||
# 授权回调地址。必须是「授权回调页面域名」下的完整 URL,
|
||||
# 而那个域名要填在公众号后台(只能填域名,不能带端口/路径/IP)。
|
||||
# 本地开发:把域名用 hosts 指到 127.0.0.1,或用内网穿透给一个公网域名。
|
||||
callback-url: ${WX_H5_CALLBACK:http://127.0.0.1:8080/api/v1/mp/h5/callback}
|
||||
# H5 应用地址:授权成功后 302 回这里
|
||||
h5-base-url: ${WX_H5_BASE_URL:http://127.0.0.1:5174}
|
||||
# 授权回调地址。域名必须是「授权回调页面域名」里填的那个,
|
||||
# 而那个域名要能解析到这台机器(本地开发用内网穿透)。
|
||||
callback-url: ${WX_H5_CALLBACK:http://394nb68658le.vicp.fun/api/v1/mp/h5/callback}
|
||||
# H5 应用地址:授权成功后 302 回这里。
|
||||
# 与接口**同域**(由本服务直接托管 H5 静态文件,见下面的 static-locations)——
|
||||
# 这样既省掉 CORS,也和正式部署的形态一致。
|
||||
h5-base-url: ${WX_H5_BASE_URL:http://394nb68658le.vicp.fun}
|
||||
# ⚠️⚠️ 跳过微信授权直接登录的开关。**生产必须为 false**。
|
||||
# 开了它就是"任何人可登录任何学生"的后门。
|
||||
# 代码里还会再判一次 profile 不含 prod(双保险)。
|
||||
|
||||
Reference in New Issue
Block a user