Nginx反向代理Angular Docker容器时静态资源无法加载求助

问题分析 #

你的配置中，proxy_pass http://localhost:4200/ 末尾的斜杠会让Nginx把/auth前缀从请求URI中移除后转发到后端，但结合Angular的basehref=/auth设置，浏览器请求的静态资源路径是/auth/xxx.js，需要确保Nginx正确将这类请求映射到后端的根路径资源。

解决方案 #

1. 修正Nginx配置 #

调整location /auth块的配置，通过重写规则或调整匹配逻辑确保路径正确映射：

方案一：添加重写规则

location /auth {
    proxy_set_header        Host $host;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        X-Forwarded-Proto $scheme;

    # 移除/auth前缀后转发到后端根路径
    rewrite ^/auth/(.*)$ /$1 break;
    proxy_pass          http://localhost:4200;
    proxy_read_timeout  90;
}

方案二：调整location匹配规则

将location /auth改为location /auth/，确保仅匹配以/auth/开头的请求：

location /auth/ {
    proxy_set_header        Host $host;
    proxy_set_header        X-Real-IP $remote_addr;
    proxy_set_header        X-Forwarded-For $proxy_add_x_forwarded_for;
    proxy_set_header        X-Forwarded-Proto $scheme;

    proxy_pass          http://localhost:4200/;
    proxy_read_timeout  90;
}

2. 确认Angular构建参数 #

构建Angular应用时必须正确设置basehref，末尾需添加斜杠：

ng build --base-href /auth/

构建完成后检查dist目录下的index.html，静态资源的引用路径应为/auth/runtime.js、/auth/styles.css这类格式。

3. 排查额外问题 #

• 清除浏览器缓存：修改配置后强制刷新页面（Ctrl+F5），避免旧缓存导致加载异常。
• 验证后端资源：在服务器执行curl http://localhost:4200/runtime.js，确认后端能正常返回静态资源。
• 检查其他Nginx规则：确保没有其他location块（比如匹配静态文件的规则）优先拦截了/auth下的请求。

内容的提问来源于stack exchange，提问作者WayneLynxM5