upstream image ... resolved to private ip ['198.18.0.119']

问题描述

next.js 本地开发图片无法加载，报错 upstream image ... resolved to private ip ["198.18.0.119"]

next.js version: 16

问题原因

next 使用 <Image> 组件针对图片进行优化（具体查看：为什么应该使用Image组件），因本机开启了代理，在解析图片资源 IP 时导致解析到了 198.18.0.119 ，该 IP 归属于 198.18.0.0/15 是 IANA 预留用于 基准测试（Benchmark Tests） 的网段，不是标准的全球公网 IP

而 next 规定：默认情况下，图片优化器只能访问“公共互联网”，严禁访问“内网/私有网络”。

问题触发流程

1. 浏览器发起请求： 浏览器解析 HTML，看到 <img src="/_next/image?url=https://...&w=1080&q=75" />。于是浏览器向 Next Node.js 服务器 请求该地址，而不是直接访问图片地址。
2. Next.js 服务器接收请求： Next.js 服务器收到了这个 /_next/image 请求。它现在的任务是：去把原图抓回来，压缩然后发给浏览器。
3. DNS 解析（关键步骤，报错发生地）： Next.js 服务器准备去 fetch（抓取）参数中的 url（即图片真实地址）。 在真正发起 HTTP 请求之前，Next.js 会先对域名进行 DNS 解析，看看这个域名对应哪个 IP 地址。
4. 安全检查 (SSRF 防护)： Next.js 拿到解析出来的 IP 地址（在这个例子中是 198.18.0.119）。 它会检查这个 IP 是否属于公网 IP。
   • 如果是公网 IP：通过，继续下载图片。
   • 如果是私有/保留 IP（如 127.0.0.1, 192.168.x.x, 10.x.x.x 或 198.18.x.x）：拦截抛出错误。

问题解决

如果图片本身存储在 CDN，已经拥有强大的图片处理能力和缓存能力时，告知 next.js 无需对图片进行优化，通过传递 unoptimized 属性达到此目的

<Image
	src="https://..."
	width={1000}
	height={440}
	alt="Blog Cover"
	unoptimized // <--- 加上这个属性
/>

如果需要图片优化功能，且错误出现在本地调试过程中且图片的地址可信任，在 next.config.js 中添加配置 dangerouslyAllowLocalIP: true 告知 next.js 可以访问 私有 IP 或 保留 IP

const nextConfig = {
  images: {
    // ...
    dangerouslyAllowLocalIP: true,
  },
};