nginx configuration to provide dynamic error pages

问题

I have an nginx server setup that serves as is used to for proxy and serving static content. The static contents are based on multiple react apps. What I want to do is replace the default error pages from nginx and serve the error pages from a React App.

The React app handles error pages based on the url. http://localhost/401.html will provide the standard 401 HTTP error page for the app, and so on. The problem is how to correctly configure this in nginx, because in reality there is no 401.html page. There is just one html file and that is `index.html'. React app handles that all own its own based on the URL using React Router.

I have tried with some error_page configuration with nginx with no luck.

Here is how the error page configuration looks like: ```

error_page 400 /error/400.html;
error_page 401 /error/401.html;
error_page 402 /error/402.html;
error_page 403 /error/403.html;
error_page 404 /error/404.html;
error_page 405 /error/405.html;
error_page 406 /error/406.html;
error_page 407 /error/407.html;
error_page 408 /error/408.html;
error_page 409 /error/409.html;
error_page 410 /error/410.html;
error_page 411 /error/411.html;
error_page 412 /error/412.html;
error_page 413 /error/413.html;
error_page 414 /error/414.html;
error_page 415 /error/415.html;
error_page 416 /error/416.html;
error_page 417 /error/417.html;
error_page 418 /error/418.html;
error_page 422 /error/422.html;
error_page 423 /error/423.html;
error_page 424 /error/424.html;
error_page 426 /error/426.html;
error_page 428 /error/428.html;
error_page 429 /error/429.html;
error_page 431 /error/431.html;
error_page 451 /error/451.html;
# 50x errors
error_page 500 /error/500.html;
error_page 501 /error/501.html;
error_page 502 /error/502.html;
error_page 503 /error/503.html;
error_page 504 /error/504.html;
error_page 505 /error/505.html;
error_page 506 /error/506.html;
error_page 507 /error/507.html;
error_page 511 /error/511.html;

location ^~ /error/ {
  root /usr/local/var/www/html/;
  allow all;
  try_files $uri $uri/ /index.html;
}

```

And this is how I include it in my nginx.conf:

    server {
         listen       8443 ssl;
         server_name  localhost;



    ssl_certificate      domain.crt;
    ssl_certificate_key  domain.key;

    ssl_session_cache    shared:SSL:1m;
    ssl_session_timeout  5m;

    ssl_ciphers  HIGH:!aNULL:!MD5;
    ssl_prefer_server_ciphers  on;

    if ( $http_user_agent ~* (nmap|nikto|wikto|sf|sqlmap|bsqlbf|w3af|acunetix|havij|appscan) ) {
        return 444;
    }


    location / {
        proxy_pass   http://localhost:3000;
        proxy_http_version      1.1;
        proxy_set_header        X-Forwarded-For    $remote_addr;
        proxy_set_header        Host         $server_name:$server_port;
        proxy_set_header        Upgrade            $http_upgrade;
        proxy_set_header        Connection         $connection_upgrade;
    }

    include error-pages/error_pages.conf;


    location /backend/ {
        proxy_pass   https://localhost:8181/backend/;
        proxy_intercept_errors on;
    }

}

Is it possible to serve error pages like this in nginx? Because it still gives me the standard 404 not found error page from nginx, because i think it is trying to find the 401.html page in that folder.

回答1:

Why not do something like this ? Assuming you have an error directory.

error_page 403 /error/403.html;
error_page 404 /error/404.html;
error_page 405 /error/405.html;
error_page 500 501 502 503 504 /error/5xx.html;

location ^~ /error/ {
    internal;
    root /var/www/default;
}

You can use this as reference

来源：https://stackoverflow.com/questions/52218821/nginx-configuration-to-provide-dynamic-error-pages

标签

reactjs

nginx

custom-error-pages

nginx-config