I added my custom designed pages to my Nginx config file and they all work great in other scenarios. The only case that my custom error page is shown but resources does not get loaded is when user tries to access an address which is SSL with typing http in the URL. For example instead of https://192.168.1.1:789, http://192.168.1.1:789 is typed which throws 400 error page without resources being loaded properly(for example images). I assume it is because for example it tries to get src="../error_pages/assets/images/img12.png" from http://192.168.1.1:789/error_pages/assets/images/img12.png" which is not available! Can you please tell me how should I approach this problem?
my Nginx config file:
upstream dashboardapp{
server test_server:80;
}
server {
listen 789 ssl;
server_name example.com;
ssl_certificate /etc/nginx/certs/host.crt;
ssl_certificate_key /etc/nginx/certs/host.key;
location / {
proxy_read_timeout 1800;
proxy_connect_timeout 1800;
proxy_send_timeout 1800;
send_timeout 1800;
proxy_hide_header x_destination;
proxy_pass http://dashboardapp;
}
location /error_pages {
root /etc/nginx/;
}
error_page 495 496 497 /400_page.html;
location = /400_page.html {
root /etc/nginx/error_pages;
internal;
}
error_page 404 /404_page.html;
location = /404_page.html {
root /etc/nginx/error_pages;
internal;
}
error_page 500 /500_page.html;
location = /500_page.html {
root /etc/nginx/error_pages;
internal;
}
error_page 502 /502_page.html;
location = /502_page.html {
root /etc/nginx/error_pages;
internal;
}
error_page 503 /503_page.html;
location = /503_page.html {
root /etc/nginx/error_pages;
internal;
}
}
Sample error page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Oops! Page not found</title>
<link rel="icon" href="../error_pages/assets/images/cropped.png" type="image/x-icon">
<!-- Google font -->
<link href="../error_pages/assets/CSS/google.css" rel="stylesheet">
<link href="../error_pages/assets/CSS/googlefont2.css" rel="stylesheet">
<style>
* {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
#notfound {
position: relative;
height: 100vh;
}
#notfound .notfound {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.notfound {
max-width: 520px;
width: 100%;
line-height: 1.4;
text-align: center;
}
.notfound .notfound-404 {
position: relative;
height: 240px;
}
.notfound .notfound-404 h1 {
font-family: 'Montserrat', sans-serif;
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 252px;
font-weight: 900;
margin: 0px;
color: #C94110;
text-transform: uppercase;
letter-spacing: -40px;
margin-left: -20px;
}
.notfound .notfound-404 h1>span {
text-shadow: -8px 0px 0px #fff;
}
.notfound .notfound-404 h3 {
font-family: 'Cabin', sans-serif;
position: relative;
font-size: 16px;
font-weight: 700;
text-transform: uppercase;
color: #262626;
margin: 0px;
letter-spacing: 3px;
padding-left: 6px;
}
.notfound h2 {
font-family: 'Cabin', sans-serif;
font-size: 20px;
font-weight: 400;
text-transform: uppercase;
color: #000;
margin-top: 0px;
margin-bottom: 25px;
}
@media only screen and (max-width: 767px) {
.notfound .notfound-404 {
height: 200px;
}
.notfound .notfound-404 h1 {
font-size: 200px;
}
}
@media only screen and (max-width: 480px) {
.notfound .notfound-404 {
height: 162px;
}
.notfound .notfound-404 h1 {
font-size: 162px;
height: 150px;
line-height: 162px;
}
.notfound h2 {
font-size: 16px;
}
}
.button {
display: inline-block;
border-radius: 4px;
background-color: #C94110;
border: none;
color: #FFFFFF;
text-align: center;
font-size: 20px;
padding: 10px;
width: 200px;
transition: all 0.5s;
cursor: pointer;
margin: 5px;
}
.button span {
cursor: pointer;
display: inline-block;
position: relative;
transition: 0.5s;
}
.button span:after {
content: '\00bb';
position: absolute;
opacity: 0;
top: 0;
right: -20px;
transition: 0.5s;
}
.button:hover span {
padding-right: 25px;
}
.button:hover span:after {
opacity: 1;
right: 0;
}
</style>
</head>
<body background="../error_pages/assets/images/background.jpg">
<div id="notfound">
<div class="notfound">
<img src="../error_pages/assets/images/img12.png" width="400" height="157">
<p></p>
<div class="notfound-404">
<h3>Oops! Page not found</h3>
<h1><span>4</span><span>0</span><span>0</span></h1>
</div>
<h3>The page you are looking for might have been removed had its name changed or is temporarily unavailable.</h3>
<a id="myElementID" href="#" class="button" style="vertical-align:middle"><span>Home Page</span></a>
</div>
</div>
</body>
<script>
var a = document.getElementById('myElementID');
a.href = "http://"+window.location.hostname;
</script>
</html>