Nginx反向代理对接Harbor时页面无法加载问题求助

问题根因 #

从提供的Nginx日志可判断：/harbor路径的请求可以正常转发到Harbor服务返回200状态码，但Harbor返回的页面中引用的静态资源（样式文件、JS脚本等）都是基于站点根路径的相对路径，浏览器发起资源请求时路径为/xxx.css//xxx.js，没有匹配到你配置的/harbor代理规则，因此全部返回404，最终导致页面加载卡住。

解决方案 #

方案一：配置Harbor上下文路径（推荐，适配子路径代理场景） #

1. 编辑Harbor安装目录下的harbor.yml配置文件，修改external_url配置项为你的代理服务访问地址：

external_url: https://<你的Nginx代理服务器IP或域名>/harbor/

2. 执行配置生效命令：

./prepare
docker-compose down && docker-compose up -d

3. 修改Nginx反向代理配置，补充X-Forwarded-Proto头，调整proxy_pass规则：

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_set_header X-Forwarded-Proto $scheme;
  proxy_ssl_verify off;
}

4. 重载Nginx配置生效：nginx -s reload

方案二：直接使用根路径/二级域名代理Harbor #

如果不需要子路径区分服务，可以直接用站点根路径或者独立二级域名代理Harbor，无需修改Harbor配置：

# 根路径代理示例
location / {
  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_set_header X-Forwarded-Proto $scheme;
  proxy_ssl_verify off;
}

内容的提问来源于stack exchange，提问作者Sandy