nginx,前端配置请求路径,后端接口应该怎么写??

你的配置分析

nginx

复制代码
location /api/ {
    proxy_pass   http://localhost:8080/admin/;
}

注意:proxy_pass 最后有一个 斜杠 /,这会影响路径的转发方式。

二、路径转发规则

规则:如果 proxy_pass 以 / 结尾

  • 原路径中的 /api/ 会被替换为 /admin/

  • 更准确地说:匹配到的部分(/api/)会被整个删除 ,然后拼接上 proxy_pass 的路径

示例映射

前端请求 Nginx 转发给后端
/api/employee/login http://localhost:8080/admin/employee/login
/api/employee/list http://localhost:8080/admin/employee/list
/api/order/detail http://localhost:8080/admin/order/detail

三、你的后端接口应该怎么写

✅ 正确写法

java

复制代码
@RestController
@RequestMapping("/admin/employee")
public class EmployeeController {
    
    // 前端调用:/api/employee/login
    // Nginx 转发:/admin/employee/login
    // 最终匹配:@RequestMapping("/admin/employee") + @PostMapping("/login")
    @PostMapping("/login")
    public Result login(@RequestBody LoginDTO loginDTO) {
        // 登录逻辑
        return Result.success();
    }
    
    // 前端调用:/api/employee/list
    // Nginx 转发:/admin/employee/list
    @GetMapping("/list")
    public Result list() {
        return Result.success();
    }
}

❌ 错误写法

java

复制代码
// 错误:如果写成这样
@RequestMapping("/api/employee")  // ❌ 后端没有 /api 路径
public class EmployeeController {
    @PostMapping("/login")
    public Result login() {
        // 转发后是 /admin/employee/login,匹配不到 /api/employee/login
    }
}

四、完整流程示例

场景:员工登录

  1. 前端代码

javascript

复制代码
// 前端调用
axios.post('/api/employee/login', {
    username: 'admin',
    password: '123456'
})
  1. Nginx 转发

nginx

复制代码
location /api/ {
    proxy_pass   http://localhost:8080/admin/;
}

实际转发给后端:http://localhost:8080/admin/employee/login

  1. 后端接口

java

复制代码
@RestController
@RequestMapping("/admin/employee")
public class EmployeeController {
    
    @PostMapping("/login")
    public Result login(@RequestBody LoginDTO loginDTO) {
        // 处理登录
        // 访问路径:/admin/employee/login
        return Result.success();
    }
}

五、特殊情况:如果不以斜杠结尾

假设你的配置是:

nginx

复制代码
location /api/ {
    proxy_pass   http://localhost:8080/admin;  # 注意:没有最后的 /
}

那么转发规则会不同:

  • /api/employee/login → http://localhost:8080/adminemployee/login(注意:/admin 和 employee 直接拼接,缺少斜杠)

  • 这通常不是你想要的效果,所以建议保持配置以 / 结尾。

六、总结

你的理解:

  • ✅ @RequestMapping("/admin/employee") 是正确的

  • ✅ 前端调用 /api/employee/login 也是正确的

  • ✅ 后端写 /login 接口匹配也是正确的

核心要点:

  1. 前端路径中的 /api/ 会被 Nginx 替换成 /admin/

  2. 后端接口路径中不要出现 /api/ ,应该用 /admin/

  3. 你的 @RequestMapping("/admin/employee") 正好匹配转换后的路径

这样配置的好处是:前端不需要知道后端的具体路径前缀(/admin),只需要统一调用 /api/xxx,Nginx 负责做路径映射。

相关推荐
FungLeo2 天前
成为全栈·Vue 管理后台篇·分页只显示第一页:从接口total 定位到前端修复
前端·vue.js·状态模式·分页·naive ui·服务端分页·前端问题排查
严肃小白兔4 天前
TanStack Router 更新构建工具链:Node.js 兼容性、路由分割与前端工程实践
前端·node.js·状态模式
大江东去浪淘尽千古风流人物13 天前
【HexVIO】DSP卸载双目惯性VIO:Hexagon向量化前端与单帧融合调度深度解析
前端·状态模式·slam·dsp·vio·hexagon·移动端加速
吃一碗粉只付一碗钱14 天前
12-给SPA友好的401和403响应
c#·状态模式
sunlifenger14 天前
嵌入式部署,解锁张家港智慧灯杆的“极简组网”密码
科技·状态模式
上火的金鱼妹15 天前
关于多进程sse连接通知的实战
javascript·状态模式·sse
阿俊-全栈开发15 天前
LikeShop 小程序商城首页可配置弹窗的设计与实现(Java + uni-app)
小程序·状态模式·likeshop·likeshop开源商城
lingyubb16 天前
配音工具怎么选?从 TTS 合成链路看 6 个可量化参数
状态模式
平头哥技术团队17 天前
从预订问到退房:一间山野民宿的数字人「旅程地图」——Theme07_Homestay.vue 端到端拆解
状态模式·数字人