前端和运维的哪些爱

完成内容

• 完成 4-5 个接口的前端联调工作
• 接入并测试微信支付流程
• 协助运维排查接口 404 的部署问题

---

Nginx 404 排查经历

问题现象

前端部署后，所有接口统一返回 404 Not Found。
后端确认服务已正常启动，因此开始排查前端与 Nginx 配置。

---

排查过程

1. 检查前端请求前缀（baseUrl）

前端配置的请求前缀为：

/api

Nginx 中转发规则：

location /api/ {
    proxy_pass http://backend/;
}

两边一致，但访问依然报 404。

2. 检查后端路径

Controller 映射路径正常，但后台日志显示：请求未到达后端。
这说明问题还是出在 Nginx 转发链路。

3. 验证实际可访问路径

让运维提供后端真实可访问地址后发现：
后端部署时多加了一个服务前缀，例如：

/server-prefix

实际路径变成：

/server-prefix/user/info

但前端与 Nginx 都没有拼接这个前缀，因此全部 404。

---

最终解决方案

• 前端修改配置文件中的 baseUrl重新打包：

/server-prefix

• 更新 Nginx：

location /server-prefix {
    proxy_pass http://backend;
}

修改后重新部署 → 全部接口恢复正常。

---

🎉 今日总结

• 完成接口联调与支付流程接入
• 协助定位 Nginx 转发与后端路径不一致的问题
• 问题根本原因：后端部署新增路径前缀但未同步告知

整体工作顺利，排查过程也帮助团队更好梳理了路径配置规则。

Nginx 转发关键知识总结

## 1. Nginx 路径匹配规则

1.1 精确匹配 (=)

location = /api {
}

只匹配完全等于 /api 的请求。

---

1.2 普通前缀匹配

location /api {
}

匹配所有以 /api 开头的请求。

---

1.3 最常用：/api/ 前缀匹配

location /api/ {
}

• 匹配所有以 /api/ 开头的路径
• 匹配到的部分 /api/ 会被处理用于后续的转发逻辑

适用于大多数前后端分离项目的 API 转发。

---

1.4 正则匹配（~ / ~*）

location ~ \.php$ {
}

用于正则判断，不常用于 API 场景。

---

## 2. proxy_pass 加斜杠 vs 不加斜杠 的区别（重点！）

假设如下配置：

location /api/ {
    proxy_pass http://backend/;
}

2.1 proxy_pass 结尾带 /（常用于 API）

• 会 删除 location 中匹配到的部分（如 /api/）
• 然后把剩余路径拼到 proxy_pass 后

示例：

请求：

/api/user/info

后端收到：

/user/info

这是接口转发最常用、最安全的写法。

---

2.2 proxy_pass 结尾不带 /

• 不会删除匹配到的部分
• 请求路径整体追加到 proxy_pass 后

示例：

location /api/ {
    proxy_pass http://backend;
}

请求：

/api/user/info

后端收到：

/api/user/info

---

最关键总结表

location	proxy_pass	后端最终收到路径
/api/	http://backend/	/user/info
/api/	http://backend	/api/user/info

区别就在于 proxy_pass 后面有没有 /。

---

## 3. 什么时候应该加 /？

推荐规则：

需求	写法	原因
去掉 /api 前缀（最常用）	proxy_pass http://backend/;	自动移除匹配前缀，路径更干净
保留 /api 前缀	proxy_pass http://backend;	原样转发完整路径

---

## 4. 为什么会出现转发后 404？（与你的场景对应）

问题原因：

• 前端访问：/api/user/info
• Nginx 去掉 /api/ → 转发 /user/info
• 但后端真实路径是：/server-prefix/user/info

路径不一致 → 404

最终通过：

• 前端 baseUrl 增加 /server-prefix
• Nginx proxy_pass 增加 /server-prefix

才使路径一致。

---

## 5. 可引用的知识点总结

Nginx 中，location 用于匹配请求路径，proxy_pass 用于决定转发后的最终路径。
proxy_pass 末尾加不加 '/' 会影响路径是否被替换：

- 加 '/'：去掉匹配部分(`/api/`)，再拼接剩余路径
- 不加 '/'：完整原路径追加到 proxy_pass 后

因此，location /api/ + proxy_pass http://backend/ 是最常用的 API 转发模式。