Skip to content

Y
yd-csf-h5
Commit 94e21536 by Sweet Zhang
Options

chore: 忽略 *.md，交付类文档不再入库

parent 348621fe
Showing with 4 additions and 155 deletions
.gitignore
......@@ -34,5 +34,9 @@ pnpm-debug.log*
.DS_Store
Thumbs.db
# 文档产物：审查报告、接口变更说明、联调说明等本地交付物，不入库。
# 若确实需要随仓库分发某个 md（如 README.md），用 `git add -f <file>` 强制添加。
*.md
# misc
tmpclaude-*-cwd
DEV-LAN-ACCESS.md deleted 100644 → 0
# 局域网 IP 访问开发服务器的可访问性说明
> 结论先行：**用 `http://localhost:5173` 能登录、用 `http://10.0.10.x:5173` 报 403，不是前端 bug，是登录服务（auth.anjibao.cn）网关的 Origin 白名单不含局域网地址。** 前端改不掉，必须让登录服务管理员登记，或改用 localhost 隧道。
---
## 1. 现象
从另一台电脑打开 `http://10.0.10.22:5173` 时：
```
GET https://auth.anjibao.cn/.well-known/openid-configuration
net::ERR_FAILED 403 (Forbidden)
at UserManager.signinRedirect (oidc.ts:53)
```
## 2. 实测证据
对同一个 discovery 地址，只改 `Origin` 请求头：
| Origin | 响应 |
|---|---|
| 不发送 Origin | `200` |
| `http://localhost:5173` | `200` |
| **`http://10.0.10.22:5173`** | **`403`** |
| `https://center.zuihuibi.cn` | `200` |
403 的响应头：
```
HTTP/1.1 403 Forbidden
Server: nginx
Vary: Origin
Content-Security-Policy: frame-ancestors 'self' http://localhost:5173
https://mdev.anjibao.cn https://mdev.zuihuibi.cn
```
`Vary: Origin` + 明确的白名单列表说明：**auth.anjibao.cn 前面的 nginx 按 Origin 放行**。
白名单里目前有 `http://localhost:5173`、`https://mdev.anjibao.cn`、`https://mdev.zuihuibi.cn`，**没有局域网 IP**。
oidc-client-ts 在 `signinRedirect` 时会先 fetch discovery 文档（`getMetadata`），这一步被 403，整个授权流程就中断了 —— 所以点登录/登出都没反应。
## 3. 解决方案（三选一）
### 方案 A：让登录服务管理员登记（唯一彻底的办法）
需要登记 **两项**，缺一项仍然登录不了：
1. **网关 Origin 白名单**（nginx）加入 `http://10.0.10.22:5173`
—— 解决 discovery / token 端点的 403。
2. **Casdoor 应用的回调地址白名单**加入 `http://10.0.10.22:5173/auth/callback`
—— `redirect_uri` 是代码按 `window.location.origin` 自动拼的，用 IP 访问时就是 IP 地址。
只改第 1 项不改这项，会在输完账号密码后报 `redirect_uri` 不匹配。
> 可以直接把下面这段发给管理员：
>
> 需要在登录服务 auth.anjibao.cn 登记一个开发联调用来源 `http://10.0.10.22:5173`：
> 1. nginx 的 Origin 白名单（以及 CSP frame-ancestors）加这一项；
> 2. 对应 Casdoor 应用的回调地址白名单加 `http://10.0.10.22:5173/auth/callback`。
登记完成后无需改任何代码，重启 dev server 即可。
### 方案 B：localhost 隧道（不用等管理员，立刻可用）
让**浏览器地址栏保持 `localhost:5173`**，这样 Origin 就在白名单里，请求通过隧道转发到真正跑 dev server 的机器。
- 用 VS Code 的「端口转发」把远端 5173 映射到本地 5173；
- 或 SSH：`ssh -L 5173:127.0.0.1:5173 <user>@10.0.10.22`，然后本机浏览器开 `http://localhost:5173`；
- Windows 无 SSH 时可用 `netsh interface portproxy` 做转发，但转发后浏览器仍需访问 `localhost`。
注意：隧道转发的是 dev server 端口，页面里的 `/csf/api` 仍走 vite 代理，不受影响。
### 方案 C：本地核对模式（跳过整条 OIDC）
项目已内置 `VITE_MOCK_ONLY` 开关，置为 `true` 后路由守卫直接放行、不再发起 OIDC。
在 `.env.development.local` 中配置（`VITE_MOCK_ONLY=true`），配合左下角的转介人切换面板使用。
**仅用于本地核对，切勿写进测试/生产构建。**
## 4. 附带发现并已修复的问题
### 4.1 本地开发实际连的是正式域名（危险，已修）
`vite.config.ts` 里 `loadEnv(mode, '.', 'http://10.0.10.40:9002')` 的第三个参数是**变量前缀**，不是后端地址。传成地址后：
```
当前写法读到 VITE_API_TARGET = undefined （实测只加载到 0 个变量）
正确写法(prefixes='') 读到 = "http://10.0.10.40:9002"
```
结果：`VITE_API_TARGET` 恒为 undefined，`/csf/api` 静默回退到 `https://center.zuihuibi.cn` —— **本地开发一直在连正式域名，有写库风险**，而你 `.env` / `.env.example` 里配的 `10.0.10.40:9002` 从未生效。
已改为 `loadEnv(mode, '.', '')`，并补了本地 `.env`。修复后实测：
```
GET http://127.0.0.1:5173/csf/api/c/dev/brokers
→ 200 {"code":200,"msg":"操作成功","data":[{"brokerBizId":...}]}
```
未配置 `VITE_API_TARGET` 时启动时会有醒目警告，不再静默连正式库。
### 4.2 dev 面板硬编码后端地址（已修）
`src/components/dev/DevBrokerSwitcher.vue` 里直连 `http://10.0.10.40:9002/...`，绕过了 vite 代理，从其他机器访问时该地址未必可达。已改为走 `/csf/api`。
### 4.3 动态导入失败的报错（已加固）
```
TypeError: Failed to fetch dynamically imported module:
http://10.0.10.22:5173/src/components/dev/DevBrokerSwitcher.vue
```
**已排除 Vite 的 host 校验**：用 `Host: 10.0.10.22` 请求该模块，返回 `200` + `Content-Type: text/javascript`，Vite 6 默认放行 IP 形式的 Host。
真实原因通常是 **dev server 正在重启或重新预构建依赖**（改代码触发、或外部机器首次访问触发 optimize），期间模块请求返回的是 HTML 兜底而非 JS，浏览器就报这个错。
已做的加固：
- 该 dev 面板改为异步加载失败时降级渲染为空，不再抛未捕获异常；
- `vite.config.ts` 增加 `server.warmup`，减少首次访问触发重优化的概率。
自查命令（在**跑 dev server 的那台机器**上执行）：
```bash
curl -i http://127.0.0.1:5173/src/components/dev/DevBrokerSwitcher.vue
# 正常应为 200 且 Content-Type: text/javascript
# 若返回 200 但是 text/html，说明该服务跑的是 preview/dist 而不是 dev server
```
若另一台机器上跑的是 `vite preview` 或 nginx 托管的 `dist/`，`/src/...` 路径根本不存在，SPA 兜底返回 index.html，同样会报这个错 —— 这种情况属于预期，dev 面板不会出现在生产产物中。
### 4.4 登录失败现在有可读提示（已加）
原先 IdP 不可达时守卫直接跳 `/logged-out`，页面只显示「已退出登录」，看不出原因。
现在会带 `?reason=idp-unreachable`，登出页显示黄色提示条，写明「当前访问地址可能未在登录服务登记白名单」，并给出改用 localhost / 联系管理员的建议。
## 5. 快速排查清单
```bash
# 1. 确认当前 Origin 是否被登录服务放行（在被访问的那台机器上执行）
curl -s -o /dev/null -w "%{http_code}\n" \
-H "Origin: http://10.0.10.22:5173" \
https://auth.anjibao.cn/.well-known/openid-configuration
# 200 = 已登记；403 = 未登记，走方案 A 或 B
# 2. 确认后端代理目标正确
curl -s http://127.0.0.1:5173/csf/api/c/dev/brokers | head -c 120
# 3. 确认 dev server 监听在 0.0.0.0（vite.config.ts 的 server.host）
# 启动日志应同时出现 Local 与 Network 两行地址
```
---
*最后更新：2026-11-02*
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment