本质是路径在客户端→Nginx→后端间多层错位,需同步调整Nginx代理(剥离前缀)、前端publicPath与API baseURL、Vue Router base、注册中心Actuator元数据及WebSocket/上传等特殊路径配置。

后端加了 context-path,集群环境下请求路径错乱、404、接口转发失败、静态资源加载异常——这些问题本质不是“配置没生效”,而是路径在客户端 → Nginx → 后端服务之间发生了多层错位。关键在于:Nginx 代理必须主动剥离或重写前缀,同时确保注册中心、前端路由、Actuator 端点等配套环节同步对齐。
明确Nginx location与proxy_pass的匹配逻辑
Nginx 的 location 匹配的是浏览器发起的原始请求路径;proxy_pass 指向的是后端服务接收时“期望看到”的路径。二者不一致就会导致转发后路径叠加出错。
- 错误写法(常见):
location /cnAdminRy/ { proxy_pass http://backend:8080/; }
→ 浏览器请求/cnAdminRy/login,Nginx 转发为http://backend:8080/cnAdminRy/login,但后端 context-path 已是/cnAdminRy,实际应处理/login,结果变成/cnAdminRy/cnAdminRy/login,404 - 正确写法:
location /cnAdminRy/ { proxy_pass http://backend:8080/; }✅
或更推荐显式重写:location /cnAdminRy/ { rewrite ^/cnAdminRy/(.*)$ /$1 break; proxy_pass http://backend:8080/; }
前端构建与API基础路径必须联动调整
Vue 项目不能只改后端路径,否则前端发出去的请求仍是 /login,而 Nginx 又没配 /login 的代理规则,直接 404。
- 修改
vue.config.js:publicPath: '/cnAdminRy/'(影响 JS/CSS 资源加载路径)devServer.proxy开发期也要加前缀,如/cnAdminRy/prod-api - 统一 API 基地址(如 Axios 实例):
baseURL: '/cnAdminRy/prod-api'(注意:此处的/cnAdminRy是 Nginx 暴露给前端的路径,不是后端真实 context-path) - Vue Router 的
base也要设为'/cnAdminRy/',否则页面刷新 404
注册中心与监控组件需显式声明管理路径
Spring Boot Admin、Nacos、Eureka 等依赖 Actuator 端点的服务,在后端设置了 server.servlet.context-path=/cnAdminRy 后,其 /actuator/health 实际变为 /cnAdminRy/actuator/health。若注册中心记录的还是旧地址,监控就会离线或数据缺失。
- Eureka 配置示例:
eureka.instance.home-page-url-path=${server.servlet.context-path}eureka.instance.health-check-url-path=${server.servlet.context-path}/actuator/healtheureka.instance.metadata-map.management.context-path=${server.servlet.context-path}/actuator - Nacos 配置同理:
spring.cloud.nacos.discovery.metadata.management.context-path=${server.servlet.context-path}/actuator - 确保 Spring Boot Admin Server 能从元数据中读取该值,而不是硬编码默认
/actuator
检查 WebSocket 和文件上传等特殊路径
如果项目用了 @MessageMapping 或 /upload 接口,它们同样受 context-path 影响,且容易被忽略。
- WebSocket 连接 URL 需改为
ws://domain/cnAdminRy/websocket,前端初始化时传入完整路径 - 文件上传接口(如
POST /cnAdminRy/common/upload)要在 Axios 请求中带全路径,后端 Controller 方法无需额外加@RequestMapping("/cnAdminRy")—— Spring Boot 会自动拼接 - Nginx 对上传大文件要额外放开限制:
client_max_body_size 100m;放在http或server块内

















