Nginx won’t load css/js/images when redirecting

cssnginxredirect

I need to redirect my page to a maintenance page when I get errors 50x. It does redirect, except it won't load css, js or images. The error log is clean and the access log doesn't show any problem.

The following code was added to my nginx.conf.default file but I saw no changes:

location ~ \.css {
    add_header  Content-Type    text/css;
}

location ~ \.js {
    add_header  Content-Type    application/x-javascript;
}

My html file is in /home/user/Documents and my css/js/png files are in /home/user/Documents/maintenance_files folder. If I open the html file in a browser, it correctly fetches those files.

My mime types are in /opt/nginx/mime.types. Here is my nginx.conf file:

#user  nobody;
worker_processes  1;

#error_log  logs/error.log;
#error_log  logs/error.log  notice;
#error_log  logs/error.log  info;
error_log   logs/error.log debug;

events {
    worker_connections  1024;
}

http {
    proxy_temp_path /home/user/work/nginx_files/proxy_tmpFiles 1 2;
    proxy_redirect off; # Tells the server we aren’t redirecting content. We actually do that later with proxy_pass.


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


    ##
    # Basic Settings
    ##

    sendfile on;
    keepalive_timeout 65;


    ##
    # Logging Settings
    ##

    #access_log /home/user/nginx_files/logs/access.log;

    ##
    # Gzip Settings
    ##

    gzip on;

    ##
    # Virtual Host Configs
    ##

    #include /etc/nginx/conf.d/*.conf;
    #include /etc/nginx/sites-enabled/*;

    include  /opt/nginx/mime.types;

    server {
        listen 80;
        server_name localhost; 

        #location ~ \.css {
        #    add_header  Content-Type    text/css;
        #}

        #location ~ \.js {
        #    add_header  Content-Type    application/x-javascript;
        #}

        error_page 500 502 503 504 /maintenance.html;
        location = /maintenance.html {
            #include  /opt/nginx/mime.types;

            root /home/user/Documents;
            #index maintenance.html;
            #internal; -> no changes
        }

        location / { 
            #include  /opt/nginx/mime.types;

            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://somelink; 
            #root /home/user/Documents;
            #index maintenance.html;
        }


    }
}

My problem is during the redirection when I get errors 50x, in this code. The html page is loaded but nginx won't load the images or css.

error_page 500 502 503 504 /maintenance.html;
location = /maintenance.html {
    #include  /opt/nginx/mime.types;

    root /home/user/Documents;
    #index maintenance.html;
    #internal; -> no changes
}

Thank you for your help.

Best Answer

Your problem is that you are serving your static content off the backend app server. So when the backend app server can't respond because it's busy, Nginx prepares a 502 response. Your configuration directs Nginx to serve a particular HTML in that case, which in turns loads more static content from Nginx. Those requests are then proxied to the app server and 502s are also returned for them as well.

It's good idea to serve static content directly off of Nginx anyway, to simplify the backend server's job of focusing on serving the app.

Structure your Nginx configuration like this to have Nginx serve the static files:

  location / {
      try_files $uri $uri/ @backend;
    }

    location @backend {
      proxy_pass http://example.com;
    }
Related Topic