前端和运维的哪些爱

完成内容

  • 完成 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 精确匹配 (=)

nginx 复制代码
location = /api {
}

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


1.2 普通前缀匹配

nginx 复制代码
location /api {
}

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


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

nginx 复制代码
location /api/ {
}
  • 匹配所有以 /api/ 开头的路径
  • 匹配到的部分 /api/ 会被处理用于后续的转发逻辑

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


1.4 正则匹配(~ / ~*)

nginx 复制代码
location ~ \.php$ {
}

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


## 2. proxy_pass 加斜杠 vs 不加斜杠 的区别(重点!)

假设如下配置:

nginx 复制代码
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 后

示例:

nginx 复制代码
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 转发模式。
相关推荐
卓豪终端管理2 分钟前
【无标题】
java·服务器·前端
修炼的dance7 分钟前
一条命令查清 WebM 有没有透明通道,默认解码会骗你
前端
小灰灰搞电子10 分钟前
Rust+Slint 实现动态流光边框源码分享
开发语言·前端·rust·流光边框
niucloud-admin16 分钟前
NIUCLOUD PHP SAAS上门家政使用文档:机构报表
前端·人工智能
枣把儿36 分钟前
开源!全套公众号写作、封面、发布自动化工具包!
前端·命令行
陶醉的松鼠39 分钟前
前端容易忽略的 debugger 调试技巧
前端
我命由我1234540 分钟前
6-3.Python 异常处理 - 异常处理进阶(else 块与 finally 块、异常传递、自定义异常)
开发语言·前端·数据库·后端·python·学习·java-ee
龙九山44 分钟前
我的 10 个 npm 插件,差点被 AI 判了死刑
前端·开源
deli0071 小时前
键盘按键测试:按下就点亮,keydown 延迟精确到 1 毫秒
前端
Amos_Web1 小时前
通过 Rspack 源码学 Rust(三):用 Default 与 std::mem::take 取出字段所有权
前端