Repository navigation
fix(ui): 修复控制面板在反向代理子路径下白屏的问题 - #440
Merged
Merged
Conversation
上游原行为：构建产物以绝对路径引用资源（/assets/xxx.js、/favicon.ico）， 面板 API 请求同样使用绝对路径。反代到子路径（如 /AGY2API/）时，浏览器 将这些请求解析到站点根，模块脚本拿到 HTML 触发 MIME 类型报错，页面白屏， favicon 404。 分支行为： - vite base 设为相对路径，构建产物中的 JS/CSS 相对于页面地址解析 - favicon 与 docs 静态图片依据面板基径引用 - frontend/src/basePath.js 提供 getBasePath()：以运行时 window.location 计算 面板基径并补齐末尾斜杠；API 基径、401 跳转、About 页端点展示与 QQ 群图片 据此拼接，请求与跳转落在同一子路径内 - 入口 HTML 在模块脚本之前补齐末尾斜杠，保证资源请求落在同一子路径内 - 后端以 PathPrefixMiddleware + PATH_PREFIX 在反代保留前缀时于路由匹配前剥掉前缀 - 文档（README 中/英/日 的环境变量段落与 .env.example）补充 PATH_PREFIX 配置说明，示例统一使用项目名 AGY2API 测试（tests/）： - 前端单元（node --test）：基径计算各场景、axios URL 组合、401 跳转、token 拦截、 构建产物相对引用及与上游产物对比 - 面板静态路由（TestClient）：MIME、favicon、docs、路径穿越防护 - 反代端到端（uvicorn + 模拟反代）：上游故障复现、分支子路径、根路径回归、 前缀保留模式、无尾斜杠 - 浏览器级（playwright-core）：精确复现上游 MIME 报错，验证分支渲染与登录、端点展示
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
问题
#144 问题在新的前端重新出现
控制面板反代到子路径（如
/AGY2API/）时页面白屏，控制台报Failed to load module script: Expected a JavaScript-or-Wasm module script but the server responded with a MIME type of "text/html"，favicon 404。根因：构建产物以绝对路径引用资源（
/assets/xxx.js、/favicon.ico），面板 API请求同样使用绝对路径。反代到子路径时，浏览器将这些请求解析到站点根而非子路径，
模块脚本实际拿到 HTML 而触发 MIME 报错。
改动
frontend/vite.config.js：base设为相对路径./，构建产物中的 JS/CSS 相对于页面地址解析frontend/index.html：favicon 以相对路径引用；在模块脚本之前补齐末尾斜杠，保证资源请求落在同一子路径内frontend/src/basePath.js：以运行时window.location提供getBasePath()，计算面板基径并补齐末尾斜杠frontend/src/api.js：API 基径与 401 跳转依据面板基径frontend/src/pages/About.jsx：API 端点展示与 QQ 群图片按面板基径拼接web.py：以PathPrefixMiddleware+PATH_PREFIX在反代保留前缀时于路由匹配前剥掉前缀.env.example）：补充PATH_PREFIX配置说明，示例统一使用项目名AGY2API测试
tests/下包含以下测试：node --test）：基径计算、axios URL 组合、401 跳转、token 拦截、构建产物相对引用及与上游产物对比部署说明
proxy_pass带 URI，如http://host:7861/）：无需任何配置，构建产物相对路径 + 运行时基径即可正常工作（默认场景）proxy_pass不带 URI，如http://host:7861）：设置PATH_PREFIX=/AGY2API，由后端在路由匹配前剥掉前缀；默认留空，不影响根路径部署或剥前缀反代的用户