Nginx reverse proxy unable to load Harbor page

Question

I am trying to place harbor behind another nginx reverse proxy

nginx reverse proxy (server1) --> harbor (in another server2 using docker-compose)

unable to reach harbor server configuration as below

server {
listen 443 ssl;
include snippets/self-signed.conf;
include snippets/ssl-params.conf;

location /harbor {
  proxy_pass https://172.21.205.245/;
  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_ssl_verify        off;
    }

}

snippets/self-signed.conf

ssl_certificate /etc/ssl/certs/nginx-selfsigned.crt;
ssl_certificate_key /etc/ssl/private/nginx-selfsigned.key;

snippets/ssl-params.conf

ssl_protocols TLSv1.2;
ssl_prefer_server_ciphers on;
ssl_dhparam /etc/nginx/dhparam.pem;
ssl_ciphers ECDHE-RSA-AES256-GCM-SHA512:DHE-RSA-AES256-GCM-SHA512:ECDHE-RSA-AES256-GCM-SHA384:DHE-RSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-SHA384;
ssl_ecdh_curve secp384r1; # Requires nginx >= 1.1.0
ssl_session_timeout  10m;
#ssl_session_cache shared:SSL:10m;
ssl_session_tickets off; # Requires nginx >= 1.5.9
ssl_stapling on; # Requires nginx >= 1.3.7
ssl_stapling_verify on; # Requires nginx => 1.3.7
resolver 8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout 5s;
# Disable strict transport security for now. You can uncomment the following
# line if you understand the implications.
# add_header Strict-Transport-Security "max-age=63072000; includeSubDomains; preload";
add_header X-Frame-Options DENY;
add_header X-Content-Type-Options nosniff;
add_header X-XSS-Protection "1; mode=block";

nginx logs as below harbor page stuck in loading

172.21.192.1 - - [01/Dec/2021:22:00:52 +0530] "GET /harbor/ HTTP/1.1" 200 477 "-" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"
172.21.192.1 - - [01/Dec/2021:22:00:52 +0530] "GET /light-theme.css?buildTimestamp=1635159453616 HTTP/1.1" 404 197 "https://172.21.196.91/harbor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"
172.21.192.1 - - [01/Dec/2021:22:00:52 +0530] "GET /dark-theme.css?buildTimestamp=1635159453616 HTTP/1.1" 404 197 "https://172.21.196.91/harbor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"
172.21.192.1 - - [01/Dec/2021:22:00:52 +0530] "GET /runtime.723165ddb219c3510b4c.js HTTP/1.1" 404 197 "https://172.21.196.91/harbor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"
172.21.192.1 - - [01/Dec/2021:22:00:52 +0530] "GET /scripts.fc1928a0f22676249790.js HTTP/1.1" 404 197 "https://172.21.196.91/harbor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"
172.21.192.1 - - [01/Dec/2021:22:00:52 +0530] "GET /styles.e71e5822ddf4adf262c4.css HTTP/1.1" 404 197 "https://172.21.196.91/harbor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"
172.21.192.1 - - [01/Dec/2021:22:00:52 +0530] "GET /polyfills.a5e9bc0ea6dbbbdc0878.js HTTP/1.1" 404 197 "https://172.21.196.91/harbor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"
172.21.192.1 - - [01/Dec/2021:22:00:52 +0530] "GET /main.cae0d8ae343d0dc7e111.js HTTP/1.1" 404 197 "https://172.21.196.91/harbor/" "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.55 Safari/537.36 Edg/96.0.1054.34"

Answer 1

It is actually working, one can see in the logs and on the webpage that data is fetched. If you hit F12 on your keyboard to see what the application is trying to fetch, you will notice some 404 errors.

The problem in your case is that your content is served from /harbor/*.js|css but the angular application is trying to fetch from /*.js|css

if you open the webconsole (F12) you'll see it yorself.