NGINX反向代理无法加载图片问题求助

1. 核对图片请求的实际状态 #

打开浏览器开发者工具（F12）切换到Network标签，刷新页面查看图片请求的URL和返回状态：

• 若返回404：说明Nginx未正确代理到后端图片资源，或是后端服务本身的图片路径配置有误。
• 若返回403：可能是Nginx或后端服务的权限限制，比如后端图片文件权限不足，或是Nginx的root/alias配置导致路径错误。

2. 修正反向代理的路径拼接逻辑 #

当前location ^~ /server1的proxy_pass地址末尾未加/，会导致路径拼接异常：
比如请求https://192.168.0.87/server1/images/test.jpg时，Nginx会转发到https://192.168.0.181/server1/images/test.jpg，但如果后端图片实际路径是https://192.168.0.181/images/test.jpg，就会出现资源找不到的情况。

修改配置如下：

location ^~ /server1/ {
  proxy_pass https://192.168.0.181/;
  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;
}

location ^~ /server2/ {
  proxy_pass https://192.168.0.81/;
  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;
}

添加/后，请求/server1/images/test.jpg会被转发到https://192.168.0.181/images/test.jpg，路径匹配更准确。

3. 调整后端服务的资源路径输出 #

后端服务可能基于自身IP生成图片绝对路径（如https://192.168.0.181/images/test.jpg），但用户访问的是代理服务器192.168.0.87，浏览器会直接请求后端IP，可能出现跨域或网络不通的问题。

解决方式：

• 让后端服务使用相对路径（如/images/test.jpg），请求会自动带上代理服务器的地址。
• 若后端无法修改，可在Nginx中添加sub_filter指令替换页面中的后端IP：

location ^~ /server1/ {
  proxy_pass https://192.168.0.181/;
  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;
  sub_filter '192.168.0.181' '192.168.0.87';
  sub_filter_once off;
}

注意：需确保Nginx安装了ngx_http_sub_module模块，可通过nginx -V查看模块列表。

4. 解决混合内容拦截问题 #

如果后端图片使用HTTP协议，而代理服务器用HTTPS，浏览器会因混合内容（HTTPS页面加载HTTP资源）阻止图片加载，Network标签会显示mixed-content错误。

解决方式：

• 确保后端服务也使用HTTPS；
• 在Nginx的server块中添加强制升级请求的响应头：

server {
  listen 443 ssl;
  server_name 192.168.0.87;
  ssl_certificate /etc/ssl/Usercerts/usersign.crt;
  ssl_certificate_key /etc/ssl/Usercerts/usersign.key;
  
  add_header Content-Security-Policy "upgrade-insecure-requests";
  
  # 其他配置...
}

5. 排查静态资源配置冲突 #

当前location /配置了root /var/www/html，若图片请求未匹配到/server1或/server2，会去/var/www/html目录查找，若该目录无对应图片则返回404，需确认图片请求路径是否正确匹配到反向代理规则。

6. 验证后端资源的可访问性 #

在Nginx服务器上执行curl https://192.168.0.181/images/test.jpg（替换为实际图片路径），检查是否能正常获取图片内容：

• 若curl失败：说明Nginx服务器无法访问后端资源，需排查防火墙、网络路由或后端服务状态；
• 若curl成功：问题出在Nginx配置或浏览器端请求处理。

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