前端与接口关系说明

一、架构关系

浏览器访问 https://view.airtep.com
        │
        ▼
   Nginx (80/443)
        │
        ├─ /              → root dist/  → index.html、config.json、api.config.json、lib/、image/
        ├─ /api/*         → 反代到 127.0.0.1:5599/  → 后端 Node（无 /api 前缀）
        └─ 其他静态        → dist/ 下文件

前端：纯静态，来自 dist/（index.html、config.json、api.config.json、lib/、image/）。由 Nginx 的 root + location / 提供。
接口：Node 进程监听 5599，路由为 /config、/stats、/view、/join、/comments 等（没有 /api 前缀）。
Nginx 反代：必须用 location /api 且 proxy_pass http://127.0.0.1:5599/;（末尾有 /），这样请求 /api/config 会被转成后端的 /config。

二、为何出现 404

nginx -T 里会看到多个 location /api 和 location /api/，来自不同站点或 include：

location /api（4 个字符）→ 反代到 5599 ✅
location /api/（5 个字符）→ 可能反代到 3000、3001、9091 等 ❌

Nginx 对前缀 location 选最长匹配。请求 /api/config 时，若当前 server 里同时存在 location /api 和 location /api/，会匹配到 location /api/。若这个 /api/ 指向的是 3001 等其它服务，就会返回 404。

因此：view.airtep.com 的 server 里只能保留「反代到 5599」的那一个 location，且不要有「location /api/」指向其它端口。

三、正确配置（view.airtep.com 仅此一段 /api）

在 view.airtep.com 的 server 块内：

只保留下面这一段，不要再写 location /api/ 或其它端口的 /api：

location /api {
    proxy_pass http://127.0.0.1:5599/;
    proxy_http_version 1.1;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header X-Forwarded-Proto $scheme;
}

若存在 include（例如 extension/view.airtep.com/*.conf），检查这些 conf 里是否带有 location /api/ 或 location /api。若有且指向 3000/3001/9091 等，要在 view.airtep.com 的站点下删掉或注释这些 include 中的 /api 配置，或在该 include 里只保留上面这段 5599 反代。

四、检查与验证

在服务器上：

# 1. 本机 API 正常
curl -s http://127.0.0.1:5599/config
# 应返回：{"danmakuEnabled":false,"danmakuPosition":"top"}

# 2. 查看 view.airtep.com 所在 server 块中的 /api 配置（行号供对照）
grep -n "location /api\|proxy_pass" /www/server/panel/vhost/nginx/view.airtep.com.conf

# 3. 查看是否有 extension 覆盖 /api
ls /www/server/panel/vhost/nginx/extension/view.airtep.com/
cat /www/server/panel/vhost/nginx/extension/view.airtep.com/*.conf

# 4. 重载后测 80 和 443
nginx -t && nginx -s reload
curl -s -o /dev/null -w "80:  %{http_code}\n" "http://127.0.0.1/api/config" -H "Host: view.airtep.com"
curl -sk -o /dev/null -w "443: %{http_code}\n" "https://view.airtep.com/api/config"
# 两者都应为 200

五、后端数据落库与前端显示

存储：后端使用 server/data/store.json（JSON 文件），路径由 server/db.js 的 __dirname 决定，与进程当前工作目录无关；每次修改（浏览/点赞/分享/加入离开/评论）都会调用 save() 落盘。
验证落库：在服务器上查看 server/data/store.json 或请求 curl -s http://127.0.0.1:5599/stats 即可确认数据是否写入。
前端显示异常：若接口正常但页面上的「播放次数、点赞、分享、评论、在看」出现被置 0 或错乱，多为前端用「部分接口返回值」直接刷新整块统计导致（例如 /join 只返回 watchingNow，却用 updateStatsUI({ watchingNow }) 把其他项也刷成 0）。处理方式：前端维护一份 lastStats，每次只合并本次接口返回的字段再刷新 UI，避免部分更新覆盖其它统计。

六、小结

角色	说明
前端	Nginx 提供 dist/ 下静态资源，同域访问。
接口	Node 监听 5599，路由为 /config、/stats 等（无 /api 前缀）。
Nginx 反代	仅用 location /api 且 proxy_pass http://127.0.0.1:5599/，且本站点内不要有 location /api/ 指向其它端口。
404 原因	存在 location /api/ 且指向 3001 等，优先于 location /api，请求被转到错误后端。

4.5 KiB Raw Blame History Unescape Escape