如何解决 Nginx 负载均衡器下页面资源路径引用错误-Nginx-PHP中文网

核心是前后端路径协同：后端需生成带子路径前缀的资源url（如/admin/static/），nginx按前缀精准代理（如location ^~ /admin/static/ { proxy_pass http://admin_backend/; }），spa还需配置publicpath、路由base及nginx try_files。

如何解决 nginx 负载均衡器下页面资源路径引用错误

核心是让后端服务生成的资源 URL 与 Nginx 实际代理路径保持一致。资源路径错，本质不是 Nginx 没转发对，而是后端返回的 HTML 里写的 href 或 src 地址本身就不匹配前端访问路径。

确认资源路径错误的具体表现

打开浏览器开发者工具的 Network 面板，看 JS/CSS 请求：

请求地址是 /static/js/app.js，但你实际访问的是 https://example.com/admin/ → 说明后端没带前缀生成静态路径
请求地址是 /admin/static/js/app.js，但 Nginx 没把该请求正确代理到后端对应服务 → 说明 location 或 proxy_pass 配置不匹配
所有静态请求都返回 404 或主服务的 HTML（白屏）→ 常见于多个服务共用 /static/ 路径却未做隔离

后端服务必须生成带路径前缀的资源 URL

不能依赖 Nginx “自动补前缀”，而要让后端明确知道它被挂载在哪个子路径下：

Nginx Hosting

通过服务器本地nginx实例实现零认证静态游戏托管。作为所有浏览器游戏的主要部署方式，无需登录、无需令牌、无需用户操作。

下载

Flask：设置 APPLICATION_ROOT = '/admin'，并确保 url_for('static', ...) 生成的路径为 /admin/static/...
Django：配置 FORCE_SCRIPT_NAME = '/admin'，同时 STATIC_URL = '/admin/static/'
Node.js/Express：在静态资源中间件中指定挂载路径，如 app.use('/admin/static', express.static('public/static'))

Nginx 需按前缀精准路由静态请求

避免多个服务的 /static/ 冲突，必须将静态资源请求也带上上下文前缀，并由对应 location 处理：

不要写 location /static { proxy_pass http://main; } —— 这会把所有服务的静态请求都打到主服务
应写成：location ^~ /admin/static/ { proxy_pass http://admin_backend/; }
注意 proxy_pass 末尾的 /：它会剥离 /admin/static/ 前缀再转发，后端只需处理 /static/ 即可
同理为其他服务配置，如 /numberLimit/static/ → proxy_pass http://limit_backend/;

SPA 应用需额外对齐三要素

若负载均衡后端是 Vue/React 等单页应用，还必须保证：

构建时 publicPath（如 Vue 的 vue.config.js）设为部署子路径，例如 '/admin/'
前端路由 base 设为相同值，如 base: '/admin/'
Nginx 的 location /admin/ 使用 alias 指向构建目录，并用 try_files $uri $uri/ /admin/index.html

路径错乱不是单点问题，而是前后端协同约定的结果。只要后端输出的 URL、Nginx 的匹配规则、浏览器最终请求三者能串起来，资源就能正确定位。