Nginx页面刷新时路径异常致图片404问题求助

网站图片存储目录为/var/www/project/images，根页面及进入/auth路径时图片加载正常，但刷新/auth页面或点击浏览器返回按钮时，图片请求出现404错误。刷新前图片请求路径是/var/www/project/images/image1.svg，刷新后变为var/www/project/auth/images/image1.svg，错误地将当前路径拼接至图片路径前方。使用React+Gatsby框架，当前Nginx配置如下：

server {
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
    server_name my_server_name; # managed by Certbot

    location / {
        root /var/www/project/
        index index.html;

        location /socket.io/ {
          proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          proxy_set_header Host $host;

          proxy_pass http://socket/; # I have an upstream defined at top of file

          proxy_http_version 1.1;
          proxy_set_header Upgrade $http_upgrade;
          proxy_set_header Connection "upgrade";
        }

        location /images/ {
            try_files $uri $uri /var/www/project/images/;
            alias /var/www/project/images/;
            expires 10d;
        }
    }
}

核心问题 #

图片引用用了相对路径而非绝对路径。Gatsby作为单页应用，前端路由切换时会自行处理路径，但刷新页面时浏览器会直接向Nginx发起请求，此时相对路径会基于当前URL（/auth）拼接，导致请求路径错误。

具体修复步骤 #

1. 统一图片引用为绝对路径 #

在React组件中引用图片时，路径必须以/开头，比如将images/image1.svg改为/images/image1.svg。Gatsby中也可通过gatsby-source-filesystem配合gatsby-image组件管理静态资源，确保生成的资源路径为绝对路径。

2. 调整Nginx配置 #

当前配置存在语法错误（root指令缺分号）、匹配优先级问题，且未配置单页应用路由 fallback。修改后的配置如下：

server {
    listen [::]:443 ssl ipv6only=on; # managed by Certbot
    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/website.com/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/website.com/privkey.pem; # managed by Certbot
    include /etc/letsencrypt/options-ssl-nginx.conf; # managed by Certbot
    ssl_dhparam /etc/letsencrypt/ssl-dhparams.pem; # managed by Certbot
    server_name my_server_name; # managed by Certbot

    # 优先匹配图片请求，避免被根路径fallback拦截
    location /images/ {
        root /var/www/project/;
        expires 10d;
    }

    # 独立配置socket.io代理，确保优先级
    location /socket.io/ {
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header Host $host;

        proxy_pass http://socket/; # upstream已在文件顶部定义

        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection "upgrade";
    }

    # 处理单页应用路由，所有非静态资源请求返回入口文件
    location / {
        root /var/www/project/;
        index index.html;
        try_files $uri $uri/ /index.html;
    }
}

配置调整说明：

• 补全root指令后的分号，修复Nginx语法错误
• 将/images/和/socket.io/移到外层，优先匹配静态资源和socket请求，避免被根路径的fallback逻辑拦截
• 根路径添加try_files $uri $uri/ /index.html;，确保刷新任意路由页面时，Nginx都返回Gatsby的入口文件，由前端路由处理后续逻辑
• 简化/images/配置，用root替代alias，因为location /images/搭配root /var/www/project/，实际指向的就是/var/www/project/images/，更简洁不易出错

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