← Về thư mục
📄 / / proc / 45 / cwd / root / .hermes / skills / devops / kanban-browser-proxy / references / nginx-spa-routing-pitfalls.md

Nginx Proxy Routing & SPA Pitfalls

1. Trailing Slashes in proxy_pass

When proxying subpaths to a backend (e.g., Python Kanban server), be careful with trailing slashes in proxy_pass:

BAD:

location /files/ {
    proxy_pass http://127.0.0.1:9120/; # Trailing slash strips the /files/ prefix
}

If the backend expects the full URI (e.g., /files/opt/...), the trailing slash causes Nginx to strip /files/ and send /opt/... to the backend, leading to 404s or incorrect root routing.

GOOD:

location /files/ {
    proxy_pass http://127.0.0.1:9120; # No trailing slash preserves the original URI
}

2. Injecting HTML into React SPAs

When using Nginx sub_filter to inject UI elements (like global navigation bars) into a React Single Page Application (SPA): - Do NOT inject elements inside or near the React root container. React will either overwrite them, or the injected HTML will break the SPA's virtual DOM reconciliation. - Do NOT inject elements that alter the normal CSS document flow, as it may hide native SPA navbars (causing things like missing menu bars). - Solution: Inject floating elements (position: sticky or position: fixed with a high z-index) directly after <body> or right before </body>, strictly outside the React application container.