nginx在前后端分离项目中核心目标是：①通过try_files实现spa路由fallback，使前端路由如/system/user返回index.html；②通过rewrite剥离/api/前缀并proxy_pass精准代理后端接口，避免404。
前后端分离项目中，Nginx 的 URL 重写核心目标就两个：让前端路由能正确加载（SPA fallback），同时把 API 请求精准转发给后端。配置不难，但容易因路径前缀、正则匹配或 flag 用错而 404 或接口 404。
关键不是写多少规则，而是理清请求流向
用户访问 /system/user，这其实是前端 Vue Router 的路由，Nginx 不该去找这个路径的文件，而应返回 index.html；
用户访问 /api/login 或 /cnAdminRy/login，这属于后端接口，Nginx 必须准确识别并代理过去，且路径要处理干净。
前端路由必须配 try_files（不是 rewrite）
Vue/React 等 SPA 刷新页面时，浏览器会真实向 Nginx 请求 /system/user 这类路径。Nginx 默认找不到对应文件，直接返回 404。
解决办法是：在静态资源 location 中用 try_files 做兜底。
location / {
root /path/to/dist;
index index.html;
try_files $uri $uri/ /index.html;
}
-
$uri：先尝试匹配真实文件（如/js/app.js） -
$uri/：再尝试作为目录（如/assets/） -
/index.html：都失败就返回首页，交由前端路由接管
✅ 这条规则覆盖所有非 API 请求，无需 rewrite
后端接口需用 rewrite 剥离前缀（常见于带 context-path 场景）
若后端 Spring Boot 配了 server.servlet.context-path=/cnAdminRy，前端请求本应发到 /cnAdminRy/login，但你希望前端代码里写 /api/login 更简洁——那就让 Nginx 把 /api/ 开头的请求，去掉 /api，再转发。
location ^~ /api/ {
rewrite ^/api/(.*)$ /$1 break;
proxy_pass http://backend:8080;
proxy_set_header Host $host;
proxy_set_header X-Real-IP $remote_addr;
}
-
^~ /api/：优先前缀匹配，避免被/的 location 拦截 -
rewrite ^/api/(.*)$ /$1 break;：把/api/login→/login，break表示不继续执行其他 rewrite，直接走 proxy_pass -
proxy_pass http://backend:8080;：注意这里末尾不加/，否则会丢掉路径；如果后端有 context-path，就写成http://backend:8080/cnAdminRy
若后端没设 context-path（即根路径运行），
proxy_pass直接指向http://backend:8080即可；
若前端请求已含完整 context-path（如/cnAdminRy/login），则无需 rewrite，直接 proxy_pass 即可。
多级 API 路径要防匹配过窄
常见错误：只写 location ~ ^/api/$，结果 /api/system/user 就匹配不上。
✅ 正确写法是：
-
location ^~ /api/—— 推荐，前缀匹配，高效且稳定 -
location ~ ^/api/.*$—— 也可，但正则匹配略慢，且易受其他 location 干扰
避免写成 location ~ ^/api/[^\/]+/[^\/]+$ 这种限定两层的规则，太脆弱。实际接口深度不可控（如 /api/v2/role/list?size=10）。
静态资源路径别被 rewrite 错误干扰
前端打包时若设置了 publicPath: '/cnAdminRy/'，那生成的 index.html 里 <script src="/cnAdminRy/js/app.js"></script> 是带前缀的。
此时 Nginx 需确保 /cnAdminRy/js/... 能正确映射到 dist 目录下的文件。
有两种解法：
-
方式一（推荐）：Nginx 用 alias 映射子路径
location /cnAdminRy/ { alias /path/to/dist/; try_files $uri $uri/ /cnAdminRy/index.html; } -
方式二：前端打包用 publicPath: '/'，Nginx 用子路径代理统一处理
配合上面的location ^~ /api/和location /，再加一条：location /cnAdminRy/ { try_files $uri $uri/ /index.html; }但需确保
index.html中资源引用是相对路径或根路径，否则 JS/CSS 加载失败。
不复杂但容易忽略。
