Nginx反向代理非根路径前端时,需用proxy_cookie_path修正Cookie Path值以匹配实际访问路径,否则浏览器拒绝携带;同时须配合proxy_redirect、rewrite和X-Forwarded-Prefix确保重定向与资源路径一致。

当 Nginx 反向代理静态资源站点(如 Vue/React 前端构建产物 + 后端 API 混合部署)时,若该站点自身或其嵌入的后端接口返回了带 Path 属性的 Cookie,而该 Path 与用户实际访问路径不一致,浏览器就会拒绝携带——尤其在静态资源走 history 模式、入口为 /app/ 或 /admin/ 等非根路径时。这时必须用 proxy_cookie_path 修正 Cookie 的 Path 值,而不是靠前端硬编码或后端改逻辑。
先确认静态资源站点的 Cookie 来源路径
静态资源本身通常不设 Cookie,但常见以下两类来源:
- 前端页面中内嵌的登录接口(如
/app/api/login)由后端返回Set-Cookie: token=xxx; Path=/api/ - 某些 SSR 框架或微前端子应用,在 HTML 响应头或 JS 初始化时主动设置
document.cookie,其路径写死为/或/project
关键看浏览器开发者工具 → Application → Cookies 下显示的 Path 值,再对比地址栏当前 URL 路径(如 https://site.com/app/dashboard)。若后者不是前者的前缀,就必然失效。
针对不同 Cookie 来源配置 proxy_cookie_path
该指令必须放在对应 location 块中,且紧邻 proxy_pass。常见组合如下:
- 后端接口返回
Path=/api/,用户访问路径是/app/→ 写:proxy_cookie_path /api/ /app/; - 静态资源由 Node.js 服务托管,它返回
Path=/project/,但 Nginx 暴露为/cms/→ 写:proxy_cookie_path /project/ /cms/; - 多个子路径共用同一域名(
/shop/、/user/),后端统一设Path=/,你想按上下文隔离 → 分别配置:location /shop/ { proxy_pass http://backend; proxy_cookie_path / /shop/; }
仅改 Cookie 不够:必须同步处理重定向与资源路径
静态资源站点常依赖后端返回的 Location 头跳转(如登录成功后 302 到 /dashboard),或内联脚本生成的 API 地址。若只修 Cookie 路径,这些链接仍指向原始路径,会导致二次请求丢失 Cookie。
- 用
proxy_redirect /api/ /app/;重写响应头中的跳转地址 - 用
rewrite ^/app/(.*)$ /api/$1 break;把客户端请求映射到后端真实路径 - 加
proxy_set_header X-Forwarded-Prefix /app;,让后端能动态拼出正确资源链接
特殊场景:前端 history 模式 + 后端未适配路径前缀
例如 Vue Router 设置 base: '/app/',但后端登录接口仍返回 Path=/。此时最稳妥做法是:
- 让后端读取
X-Forwarded-Prefix并生成Path=/app/—— 若不可控,则 Nginx 强制覆盖:proxy_cookie_path / /app/; - 同时确保所有
Set-Cookie都被拦截修正,包括第三方 SDK 或埋点服务注入的 Cookie(需检查响应头是否含多个Set-Cookie) - 避免用
proxy_cookie_path / /;简单回退到根路径,否则会污染其他子路径下的 Cookie 作用域


















