HTTPS环境下Nginx代理NextJS时JPG图片加载失败问题

技术栈：Node v20、npm、Nginx、NextJS v13.5.4

现象 #

• 直接通过HTTP访问127.0.0.1:3000时，所有图片加载正常
• 经Nginx代理的HTTPS环境中，SVG图片显示正常，但JPG图片加载失败，请求返回500错误，响应信息："url" parameter is valid but upstream response is invalid
• 示例请求链接：https://ylous.keenetic.link/_next/image?url=%2F_next%2Fstatic%2Fmedia%2Fsnicker.2ee2553c.jpg&w=640&q=75

当前Nginx配置 #

server {
    server_name ylous.keenetic.link www.ylous.keenetic.link;

    server_tokens off;

    gzip on;
    gzip_proxied any;
    gzip_comp_level 4;
    gzip_types text/css application/javascript image/svg+xml;

    proxy_http_version 1.1;
    proxy_set_header Upgrade $http_upgrade;
    proxy_set_header Connection 'upgrade';
    proxy_set_header Host $host;
    proxy_cache_bypass $http_upgrade;

    location / {
        proxy_pass http://127.0.0.1:3000;
    }

    listen 443 ssl; # managed by Certbot
    ssl_certificate /etc/letsencrypt/live/ylous.keenetic.link/fullchain.pem; # managed by Certbot
    ssl_certificate_key /etc/letsencrypt/live/ylous.keenetic.link/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 {
    if ($host = www.ylous.keenetic.link) {
        return 301 https://$host$request_uri;
        } # managed by Certbot


        if ($host = ylous.keenetic.link) {
            return 301 https://$host$request_uri;
            } # managed by Certbot


            listen 80;

            server_name ylous.keenetic.link www.ylous.keenetic.link;
            return 404; # managed by Certbot


        }

Next.js Image组件代码 #

<Image src={Snicker} alt="Sniker" width={200} height={80} className="rounded-xl" priority/>

问题根源是Nginx代理时未正确传递请求头，且对Next.js图片优化路径的处理不当，导致Image服务无法正常生成JPG响应。

1. 完善代理请求头配置 #

在location /块中补充转发必要的请求头，确保Next.js能识别请求的真实协议和来源：

location / {
    proxy_pass http://127.0.0.1:3000;
    # 添加以下请求头
    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_set_header X-Forwarded-Host $host;
    proxy_set_header X-Forwarded-Port $server_port;
}

2. 为Next.js图片优化路径单独配置 #

Next.js通过/_next/image处理图片优化请求，需禁用该路径的gzip压缩（避免损坏已优化的图片），并确保请求头正确转发：

location /_next/image {
    proxy_pass http://127.0.0.1:3000;
    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;
    gzip off;
}

3. 优化gzip配置（可选） #

为JPG、PNG等图片类型添加gzip支持，优化传输效率：

gzip_types text/css application/javascript image/svg+xml image/jpeg image/png;

4. 验证配置并重启Nginx #

• 检查配置合法性：

sudo nginx -t

• 重启Nginx生效：

sudo systemctl restart nginx

5. 检查Next.js配置（额外确认） #

确保next.config.js中允许当前域名的图片访问：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    domains: ['ylous.keenetic.link'],
  },
}

module.exports = nextConfig

Next.js Image优化服务依赖X-Forwarded-Proto等请求头确认当前请求协议为HTTPS，否则会出现协议不匹配导致的响应异常；同时Nginx对/_next/image路径的gzip压缩会损坏Next.js返回的已优化图片，触发上游响应无效的错误。

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