Nginx代理与Angular应用问题：CSS/JS因MIME类型错误无法加载

问题根源 #

核心问题是代理路径与后端Nginx的资源路径不匹配：

• 代理请求的路径是/app/xxx.js，但后端Nginx的root目录下直接存放Angular构建后的静态文件（如main.js、styles.css），不存在app子目录。
• 当Nginx找不到/app/xxx.js时，触发try_files返回index.html，导致浏览器收到HTML文件却被当作JS模块加载，从而报MIME类型错误。

后端Nginx配置修改方案 #

方案一：用rewrite去掉路径前缀 #

修改后端Nginx配置，添加专门处理/app/路径的location，通过rewrite去掉前缀后查找静态文件：

server {
    listen 28007;
    server_name _;
    # 加载默认MIME类型配置（容器内路径若不同请自行调整）
    include /etc/nginx/mime.types;

    # 处理带/app前缀的代理请求
    location /app/ {
        root /container/home/www/my-weblclient/browser;
        # 去掉/app前缀，将请求转为查找根目录下的对应文件
        rewrite ^/app/(.*)$ /$1 break;
        try_files $uri $uri/ /index.html;
    }

    # 兼容直接访问后端端口的情况（可选）
    location / {
        root /container/home/www/my-weblclient/browser;
        try_files $uri $uri/ /index.html;
    }
}

方案二：用alias直接映射资源目录 #

更简洁的写法是使用alias，直接将/app/路径映射到Angular的静态文件目录：

server {
    listen 28007;
    server_name _;
    include /etc/nginx/mime.types;

    location /app/ {
        # 注意末尾的斜杠，确保路径映射正确
        alias /container/home/www/my-weblclient/browser/;
        # 资源不存在时返回Angular的index.html（需带/app前缀）
        try_files $uri $uri/ /app/index.html;
    }
}

Nginx Proxy Manager配置检查 #

确保代理规则的转发目标配置正确：

• 如果后端Nginx配置了location /app/，转发目标设置为http://172.21.0.1:28007即可（代理会保留/app前缀传递给后端）。
• 确认代理路径设置为/app，若Angular应用用到WebSocket，需开启Websockets Support。

额外验证 #

1. 确认Angular构建时base href正确：执行ng build --base-href /app/，生成的index.html中资源路径应为/app/main.js这类格式。
2. 重启后端Nginx容器和Nginx Proxy Manager，清除浏览器缓存后重新测试。

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