From 8d60dd1251b9f36df13998f04457a5c4d668c610 Mon Sep 17 00:00:00 2001 From: zzhyyyyy <2685922758@qq.com> Date: Sun, 21 Jun 2026 11:48:42 +0800 Subject: [PATCH] =?UTF-8?q?fix(media):=20=E5=90=8E=E5=8F=B0=E5=9B=BE?= =?UTF-8?q?=E7=89=87=E6=8C=87=E5=90=91=20App=20=E5=90=8E=E7=AB=AF,?= =?UTF-8?q?=E4=BF=AE=E7=BA=BF=E4=B8=8A=E5=9B=BE=E7=89=87=20404?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 线上 admin(admin-web.shaguabijia.com)的「上报审核截图 / 反馈截图 / 反馈二维码」 全部 404:NEXT_PUBLIC_MEDIA_BASE 为空时,图片被拼到不 serve /media 的 admin 域。 媒体实际由 App 后端托管,故让前端指向它: - .env.production: NEXT_PUBLIC_MEDIA_BASE=https://app-api.shaguabijia.com - lib/media.ts: base 去末尾斜杠,防拼出 //media 注:NEXT_PUBLIC_* 为编译期常量,合并后服务器需 npm run build + 重启服务才生效。 Co-Authored-By: Claude Opus 4.8 (1M context) --- .env.production | 12 +++++++----- src/lib/media.ts | 11 ++++++----- 2 files changed, 13 insertions(+), 10 deletions(-) diff --git a/.env.production b/.env.production index b6dc125..999ce0e 100644 --- a/.env.production +++ b/.env.production @@ -1,7 +1,9 @@ -# 生产:前端与 admin API 同域(admin.shaguabijia.com),nginx 把 /admin/api 反代到后端 8771。 -# 留空 = axios 用相对路径,请求落到当前域名,由 nginx 转发。 +# 生产:前端与 admin API 同域(admin-web.shaguabijia.com),nginx 把 /admin/api 反代到后端 8771。 +# 留空 = axios 用相对路径,请求落到当前域名,由 nginx 转发。(已验证线上 /admin/api 走通、操作 200) NEXT_PUBLIC_API_BASE= -# 媒体(反馈二维码 / 上报截图)的公开地址。媒体由 App 后端的 /media 托管,默认不在 admin 域。 -# 设为可公开访问媒体的源(如 https://api.shaguabijia.com),或在 admin nginx 增加 /media 反代后留空走同域。 -NEXT_PUBLIC_MEDIA_BASE= +# 媒体(反馈二维码 / 上报截图 / 头像)由 App 后端托管在 app-api.shaguabijia.com/media,【不在 admin 域】。 +# 必须指到 App 后端的公开域名,否则 admin 里所有 /media 图片都会 404(被拼到 admin 域而非 App 域)。 +# 都是 https → 无混合内容; 跨域加载不受 CORS 限制,无需后端配 CORS。 +# ⚠️ NEXT_PUBLIC_* 是编译期常量:改这里后必须重新 `npm run build` 再部署,前端才会带上新值。 +NEXT_PUBLIC_MEDIA_BASE=https://app-api.shaguabijia.com diff --git a/src/lib/media.ts b/src/lib/media.ts index c63eb0d..e351995 100644 --- a/src/lib/media.ts +++ b/src/lib/media.ts @@ -1,8 +1,9 @@ -// 媒体(上报截图 / 反馈截图 / 反馈二维码等)由 App 后端的 /media 静态服务托管,admin 域不一定同源: -// - dev:NEXT_PUBLIC_MEDIA_BASE 指向 App 后端(http://localhost:8770)。 -// - 生产:留空 = 走同域相对路径,由 admin nginx 的 /media 反代到后端(见 deploy/nginx/*.conf), -// 避免跨域 / 混合内容(https 页面引 http 图会被浏览器拦)。 -const MEDIA_BASE = process.env.NEXT_PUBLIC_MEDIA_BASE || ''; +// 媒体(上报截图 / 反馈截图 / 反馈二维码等)由 App 后端的 /media 静态服务托管,与 admin 不同域: +// - dev :NEXT_PUBLIC_MEDIA_BASE = http://localhost:8770(本地 App 后端)。 +// - 生产:NEXT_PUBLIC_MEDIA_BASE = https://app-api.shaguabijia.com(线上 App 后端,/media 真正的家)。 +// 留空则退化为同域相对路径——而 admin 域(admin-web.shaguabijia.com)并不 serve /media,会 404, +// 这正是线上后台图片打不开的根因。NEXT_PUBLIC_* 是编译期常量,改完需重新 build 才生效。 +const MEDIA_BASE = (process.env.NEXT_PUBLIC_MEDIA_BASE || '').replace(/\/+$/, ''); // 去末尾斜杠,防拼出 //media /** 把后端返回的相对媒体路径(/media/...)拼成可加载的 URL;已是 http(s) 绝对地址的原样返回。 */ export function mediaUrl(p: string): string { -- 2.52.0