Nginx反向代理部分静态资源加载失败问题求助

核心原因 #

懒加载图片（如oslo.jpg）的请求路径没被Nginx正确转发到后端Apache，反而触发了Nginx本地静态文件查找规则（默认指向/usr/share/nginx/html）；而正常加载的图片（如flag.png）的请求路径恰好匹配到了代理规则，所以能正常加载。

排查与修复步骤 #

1. 检查Nginx代理规则的覆盖范围 #

查看当前虚拟主机的Nginx配置，确认所有静态资源请求都被代理到后端。常见问题是配置了特定后缀的location规则，漏掉了懒加载图片的请求路径，或者相对路径导致请求URI不匹配。

典型错误配置（可能存在的问题）：

server {
    listen 80;
    server_name www.my-site;

    # 只代理根路径请求，静态资源走本地查找
    location / {
        proxy_pass http://backend-apache;
    }

    # 静态资源请求被Nginx本地处理，导致懒加载图片找不到
    location ~* \.(png|jpg|jpeg)$ {
        root /usr/share/nginx/html;
    }
}

修复方案：

把静态资源请求也代理到后端Apache，确保所有请求都走反向代理：

server {
    listen 80;
    server_name www.my-site;

    # 代理所有请求到后端Apache，包括静态资源
    location / {
        proxy_pass http://backend-apache;
        # 必须设置的请求头，确保后端能正确处理请求
        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 ~* \.(png|jpg|jpeg)$ {
    #     proxy_pass http://backend-apache;
    #     proxy_cache static_cache;
    #     proxy_cache_valid 200 1d;
    # }
}

2. 验证懒加载图片的请求URI #

用浏览器开发者工具的网络面板，查看懒加载图片的完整请求URL：

• 确认请求路径是/oslo.jpg这类正确路径，还是出现了错误前缀（比如/static/oslo.jpg）
• 如果是相对路径问题，需确保前端生成的请求URI和后端资源路径一致

3. 清理Nginx本地路径配置 #

检查当前虚拟主机配置中是否误设置了root /usr/share/nginx/html;，导致未匹配代理规则的请求去本地查找。如果有全局静态资源规则，需为该虚拟主机单独覆盖：

server {
    listen 80;
    server_name www.my-site;

    # 注释或删除本地root配置，确保所有请求走代理
    # root /usr/share/nginx/html;

    location / {
        proxy_pass http://backend-apache;
        # 必要请求头设置
        proxy_set_header Host $host;
        ...
    }
}

4. 测试配置并重启Nginx #

修改配置后先验证语法正确性：

nginx -t

确认无错误后重启Nginx：

systemctl restart nginx

5. 后端Apache资源验证 #

确认后端Apache的站点根目录是/var/www/dstorewp02/www3/www.my-site，且oslo.jpg确实存在于该目录下，同时Apache配置允许访问该资源。

内容的提问来源于stack exchange，提问作者Roberto D. Maggi