Nginx维护配置搭配Angular出现MIME类型错误及重定向循环问题

为什么两种配置都出问题？ #

• 用try_files /index.html $uri $uri/;时，所有请求（包括js、css、图片这类静态资源）都会优先返回index.html，浏览器拿到HTML文件却要按js/css解析，自然触发MIME类型错误——哪怕网络请求返回200，内容类型不匹配也无法正常解析。
• 换成try_files $uri $uri/ /index.html;加上原有if判断，会陷入无限循环：请求/maintenance时，Nginx找不到对应文件，会转发到/index.html，此时$uri变为/index.html，不满足$uri != /maintenance的条件，又被重定向回/maintenance，反复循环就触发了重定向次数过多的错误。

正确的维护模式配置 #

把静态资源和SPA路由分开处理，确保静态资源能正常加载，同时只将非/maintenance的路由重定向过去：

user www-data;
worker_processes auto;
pid /run/nginx.pid;
include /etc/nginx/modules-enabled/*.conf;

events {
    worker_connections 768;
    # multi_accept on;
}

http {

    ##
    # Basic Settings
    ##
    add_header Access-Control-Allow-Origin *;

    sendfile on;
    tcp_nopush on;
    tcp_nodelay on;
    keepalive_timeout 65;
    types_hash_max_size 2048;
    # server_tokens off;

    # server_names_hash_bucket_size 64;
    # server_name_in_redirect off;

    include /etc/nginx/mime.types;
    default_type application/octet-stream;

    ##
    # SSL Settings
    ##

    ssl_protocols TLSv1 TLSv1.1 TLSv1.2 TLSv1.3;
    ssl_prefer_server_ciphers on;

    ##
    # Logging Settings
    ##

    access_log /var/log/nginx/access.log;
    error_log /var/log/nginx/error.log;

    ##
    # Gzip Settings
    ##

    gzip on;

    ##
    #Original IP Forwarding
    ##
    proxy_set_header X-Forwarded-For $remote_addr;

    ##
    # Virtual Host Configs
    ##
    server {
            listen       80 default_server;
            listen       [::]:80 default_server;
            server_name  _;
            return 301   https://$host$request_uri;
    }

    server{
        listen 443 ssl;
        server_name mysite.com;
        root /etc/mysite/enabled-sites/ngbuild/browser; 

        # 单独处理静态资源，确保js、css、图片等返回正确的MIME类型
        location ~* \.(js|css|png|jpg|jpeg|gif|ico|svg)$ {
            try_files $uri =404;
        }

        location / {
            # 仅当请求路径不是/maintenance时，才执行重定向
            if ($request_uri !~ ^/maintenance$) {
                return 302 https://$host/maintenance; 
            }
            # 让Angular接管路由渲染/maintenance页面
            try_files $uri $uri/ /index.html;
        }

    }
    
}

关键调整点 #

1. 新增静态资源规则：匹配常见静态资源后缀，直接返回对应文件，避免把静态资源请求转发到index.html，从根源解决MIME类型错误。
2. 优化重定向判断：用$request_uri匹配完整请求路径，确保只有非/maintenance的请求才会被重定向；当请求/maintenance时，Nginx会先尝试查找对应文件（不存在则转发到index.html），由Angular路由处理该路径，不会触发循环。

另外补充：生产环境用try_files $uri $uri/ /index.html;是Angular SPA的标准配置——先优先返回静态资源，找不到再交给SPA路由，这也是它能正常运行的原因；反过来先返回index.html会导致静态资源被当成HTML返回，自然触发MIME错误。

内容的提问来源于stack exchange，提问作者Sael Torres-Diaz