Nginx refuses custom error pages

Anekdotin asked:

I am able to see nginx error pages, but not my own. proxy_inter_errors properly redirects. I made a custom 404 and 500 error page with my logo. It will only show the nginx default error pages, not my custom html. I want to see a picture of the dog on the html, not the default nginx 502 Bad Gateway
nginx/1.14.0 (Ubuntu)

server {
    if ($host = www.example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot


    if ($host = example.com) {
        return 301 https://$host$request_uri;
    } # managed by Certbot



   listen 80;
   server_name example.com www.example.com;


   location / {
        proxy_pass http://127.0.0.1:5000/;
        proxy_intercept_errors on;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_secret_header;
        add_header X-Cache-Status $upstream_cache_status;

   }


}


server{

        listen 443 ssl http2;
        listen [::]:443 ssl http2;
        server_name www.example.com example.com;

        if ($host = 'example.com') {
        return 301 https://www.example.com$request_uri;
        }


        ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
        ssl_session_timeout 1d;
        ssl_ciphers         HIGH:!aNULL:!MD5;
        ssl_session_cache   shared:SSL:50m;
        ssl_stapling        on;
        ssl_stapling_verify on;


        ssl_certificate /etc/letsencrypt/live/example.com-0001/fullchain.pem; # managed by Certbot
        ssl_certificate_key /etc/letsencrypt/live/example.com-0001/privkey.pem; # managed by Certbot

     error_page 400 401 402 403 404 405 495 496 497 /404.html;

    error_page 500 501 502 503 504 505 506 507 508 510 511 /500.html;

    location / {
    
        include proxy_params;
        proxy_pass http://127.0.0.1:5000/;
        proxy_intercept_errors on;
        proxy_set_header X-Forwarded-Proto $scheme;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_cache_bypass $http_secret_header;
        add_header X-Cache-Status $upstream_cache_status;

        client_max_body_size 100M;
        proxy_headers_hash_max_size 512;
        proxy_headers_hash_bucket_size 128;


    }

    location /static/ {
        alias /home/droid/example/app/static;
    }

    location /media/ {
        alias  /nfs;
    }

}

My answer:


You specifically asked for this behavior with proxy_intercept_errors on;. If you want to see the errors from your web application in the browser, this must be off. (But do not do this in production; use your application logs instead.)


View the full question and any other answers on Server Fault.

Creative Commons License
This work is licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License.