How to always return a custom 404 page for the default host

Here are the steps to redirect 403 to 404 in NGINX.

Restarting NGINX and Testing Your Page

$ sudo systemctl reload nginx

Finally, open your browser and visit any page that does not exist to view the error page, as shown below.

Custom 404 Response Page

Restart NGINX Server

Restart NGINX server to apply changes.

$ sudo nginx -t $ sudo systemctl restart nginx

That’s it. Now NGINX web server will return 404 file we created above, when there is a 403 status code response. If you use Apache server, you may also want to read how to redirect 403 to 404 in Apache server.

$ sudo service nginx reload #debian/ubuntu
$ systemctl restart nginx #redhat/centos

That’s it! Now your NGINX server will automatically redirect 404 URLs to their new location.

By the way, if you want to create charts & dashboards to monitor your business or website, you can try Ubiq. We offer a 14-day free trial.

That’s it. Now NGINX will automatically return your custom error page for 404 page not found errors. Similarly, you can configure custom error pages for other error codes such as 403, 500, 502, etc. by changing error code number and response URL in error_page directive. Ubiq makes it easy to visualize data, and monitor them in real-time dashboards. Try Ubiq for free.

NGINX allows you to configure custom 404 page for your website, which are automatically rendered in case a requested URL is not found on your website. This allows you to display intuitive next steps to your website visitors, when they are unable to find a page on your website. You can use these steps to configure custom error pages in NGINX, for various error codes such as 404, 403, 500, 502, etc. Here are the steps to create custom 404 page in NGINX.

Here is how to create custom 404 page in NGINX.

When a requested URL is not found, it is advisable to redirect 404 error to another URL with next steps. N GINX allows you to easily redirect 404 pages to a specific URL. Here’s how to redirect 404 to homepage in NGINX.

Here are the steps to redirect 404 to Homepage in NGINX. After you redirect 404 to homepage in NGINX, you may want to use a charting tool to monitor the key metrics about your website/application such as signups, traffic, sales, revenue, etc. using dashboards & charts, to ensure everything is working well.

When you host your website on the NGINX web server, it will handle the client request, but when the request is not fulfilled, it will return an error.

NGINX 404 Error Page

Having a dynamic site with such an ugly-looking page will reduce the UI/UX impression of your site. However, NGINX provides you with the option to configure a custom error page for your site.

To do that, you need to create a custom HTML page and specify it in the error_page directive of the NGINX configuration file, which will be used as the URI to serve the custom error page for the specified error in the configuration file.

Today, you will learn how to create and configure NGINX to handle single or multiple errors, like 404 pages in nginx with custom HTML pages.

Nginx returns 404 after loggin in with basic authentication

Here is my full configuration for that app. But i’ve hidden other configuration details(TLS,http redirect,etc.) :

When i try to access the protected page,i get this :

When i tap bad credentials i don’t get the request page as expected.

So when i tap the expected credentials i get a

404

:

A tried other solutions as well even thaugh they aren’t marked as solving the problem.

Try this ?

Kubernetes nginx ingress controller return 404, The default backend is a service which handles all URL paths and hosts the nginx controller doesn’t understand (i.e., all the requests that are not mapped with an Ingress). Basically a default backend exposes two URLs: /healthz that returns 200 / that returns 404

Create 404 page

$ sudo vi /var/www/html/404.html

Save and exit this file.

Also read : How to Enable Keep Alive in NGINX

Open NGINX configuration file

$ sudo vi /etc/nginx/nginx.conf

$ sudo vi /etc/nginx/sites-enabled/website.conf

Alternatively, you can also open the default virtual host configuration file.

$ sudo vi /etc/nginx/sites-enabled/default

Also read : How to Enable GZIP compression in NGINX

First, we will create a new configuration file within the snippet directory located at the /etc/nginx/snippets path with name error-page.conf.

For that, create a snippets directory. If it does not exist in the /etc/nginx path, the below command will create a new directory with the name snippets.

$ sudo mkdir -p /etc/nginx/snippets

Then execute the below command to create the error-page.conf configuration file within the snippets directory.

$ sudo nano /etc/nginx/snippets/error-page.conf

Once the file is open for editing, then copy and paste the below code into the configuration file and save it.

Next, we have to include error-page.conf inside the NGINX configuration file. For that, execute the below command to open the NGINX configuration file.

$ sudo nano /etc/nginx/sites-enabled/default # For Ubuntu/Debian-based distro’s
OR
$ sudo nano /etc/nginx/nginx.conf # For RHEL/Fedora-based distro’s

Below is the output of the above command.

Opening NGINX configuration file

Copy the below line to include the absolute path of the snippet file and place it within the server container in the NGINX configuration file.

Below is the output after the changes.

NGINX configuration file after changes

Finally, you can restart the NGINX web server and test your page.

Create custom error file error404.html using text editor, or a page builder like Squarespace, WordPress, or Wix, and place it in website root folder. You can change the file name as per your requirement.

Also read : How to Limit Download Speed in NGINX

Configuring nginx to return a 404 when a URL matches a pattern

How can I configure nginx to return a 404 code for a request that matches a specific pattern, such as
/test/*
?

Check out the documentation for the ngx_http_core_module’s location directive at nginx.org/en/docs/http/ngx_http_core_module.html#location.

You can copy the above HTML code, paste it into your text editor, and save the file with the name “error-page.html“. Later on, you can change it to something different.

Now copy the “error-page.html” file into the NGINX document root directory located at the /var/www/html path using the below command.

$ sudo cp error-page.html /var/www/html/

The next part will be creating a config file (snippets) and configuring the nginx.conf file.

How to get nginx to return 404 unless a specific domain name is requested?

I’m looking to configure my nginx server to perform return 404 for all requests except those that involve
anything
, which are
www
,
mypythonapp1
, or
mypythonapp2
.

In
/etc/nginx/sites-enabled
, I generated a file labeled as
00-noredirect
.

Regrettably, all items are directed to
mypythonapp1
.

I’m uncertain, but I believe
certbot
may have a connection with the changes made to my
/etc/nginx/sites-enabled/mypythonapp1
.

Do I need to include any additional code with
00-noredirect
to prevent this undesired action?

Upon further examination of
error.log
, it became apparent that the last part «broke everything» due to
no «ssl_certificate» is defined in server listening on SSL port while SSL handshaking
. To rectify the situation, I replicated the
ssl_certificate
and
ssl_certificate_key
lines that
certbot
had added to other domains. Although I still receive a certificate warning when requesting
anything.mydomain.com
, I can bypass it and avoid accessing
mypythonapp1
, which was my primary goal.

How to always return a custom 404 page for the default host

I have nginx 0.8.53 configured with some virtual hosts which work as desired. However, due to nginx’s «best match» on virtual hosts, I need to add a default host to catch all requests that aren’t for a specific virtual host. I would like the default host to return a custom 404 page that I created instead of the default nginx 404 page.

I assumed I needed something like:

But this still returns the default nginx 404 page. It seems the

return 404

ignores the

error_page

config.

Here what I have in my conf to make it work:

Very few directives in nginx take a filesystem path. You want something like:

Move the error_page directive up the conf to before you call return 404.

This should work:

This will use the same custom one for all sites (servers). You need to add the error docs location.

I had the same issue, and fixed it by removing the

include

line:

Proxy — Nginx returns 404 for proxied requests, but return, Therefore this rule return 404; # managed by Certbot is taking in place first, that’s why are you getting 404. And when you try to access directly to mydomain.tld, your browser correctly send host header to your Nginx proxy server, so the first redirect rule taking in place and you are getting 200 http code.

Wrap up

That’s all for this article, where you learned how to create a custom error page to handle requests beautifully and effectively to your web server.

I hope this article might be useful for your journey to learning the NGINX web server. If you are still facing any issues, the comment section is open for you.

Innovative tech mind with 12 years of experience working as a computer programmer, web developer, and security researcher. Capable of working with a variety of technology and software solutions, and managing databases.

Redirect 404 to Homepage in NGINX

error_page 404 /error.html;

error_page 404 /index.html;

error_page 404 =200 /error.html;

Similarly, you can also catch 500 server error response,

error_page 500 /error.html;

Bonus Read : How To Implement NGINX Reverse Proxy

Redirect 403 response to 404

We will use error_page NGINX directive to return 404.html page when server returns 403 response. error_page directly returns the specified html page when it encounters the specified response code. Here is the syntax of error_page directive.

error_page response_code path_to_html_file

You need to mention the error response code and the file to be returned for its response.

Open NGINX server configuration file.

The above two lines tell NGINX to return 404.html file whenever there is a 403 or 404 response.

Also read : How to Redirect Subdirectory to Root in NGINX

Nginx returns «404 Not Found» for everything but index. html

I was unable to provide a response in the comments due to incorrect permissions being set.

Transferred from Stack Overflow.

For anything other than
index.html
, my website at https://davisstanko.com displays a 404 error. This also applies to files such as pictures, which can be verified in the network tab of inspect element.

After testing the code on my local machine, which can be accessed at https://github.com/DavisStanko/davisstanko.com, I suspect the issue may be related to nginx.

I am utilizing rsync to transfer files from my Manjaro-based PC to the VPS.

Upon executing
ls -l
on the server, all files, even those resulting in a 404 error, will be included in the output
-rw-r—r—
.

Provided here is a section of my nginx configuration that I assume to be significant.

If further details are required, kindly inform me.

In the server, all files returned -rw-r-r— when running ls -l command, even those causing 404 error. However, the directories lacked the appropriate permissions. Adjusting the directories’ permissions resolved the issue, enabling the web server to showcase the files.

NGINX returns 404 when accessing a defined location, You’re using root so the path of the filename is constructed by concatenating the value of the root with the value of the URI. So /gg/index.

Prerequisites

I am trying to deploy a dotnet application with angular. However, when I am configuring nginx as the documentation by Microsoft recommends it, then accessing the website on the base url throws a 404 not found, but all other urls work fine.

I am building using:

dotnet publish —configuration Release

If i access the /index.html it finds the index.html but if I access without it it returns 404 not found even though I redirect every url to index.html in my angular code:

For every api endpoint one has to define the proxy pass but for the index / one has to serve the wwwroot folder.

Also read : How to Enable Caching in NGINX

Open NGINX config file

$ sudo vi /etc/nginx/sites-enabled/domain.conf

Bonus Read : How To Disable NGINX Cache

NGINX allows you to easily set up multiple pages for different HTTP errors.

Instead of creating a separate page and configuring each error page for the custom errors, we are providing you with a GitHub repository with premade custom error pages with a configuration that can be configured within seconds.

Execute the below commands step by step.

$ sudo mkdir -p /srv/http/default
$ sudo git clone https://github.com/denysvitali/nginx-error-pages /srv/http/default
$ mkdir -p /etc/nginx/snippets/
$ sudo ln -s /srv/http/default/snippets/error_pages.conf /etc/nginx/snippets/error_pages.conf
$ sudo ln -s /srv/http/default/snippets/error_pages_content.conf /etc/nginx/snippets/error_pages_content.conf

Also read: How To Change the Nginx Web Document Location in Linux

Now open the NGINX configuration file with your choice of text editor.

Add the below line inside the configuration file.

Last, reload your NGINX web server to apply the changes.

Now you can simply visit any unknown page to check the error page, as shown below.

Also read: How to Change Nginx 80 Port in Linux