Next.js Image 读取本地 IP 图片返回 400 的排查记录

现象

首页 HomepageLanding.tsx 的 FeatureVisual 组件中使用 <Image> 展示来自本地 Supabase Storage 的封面图时，图片请求返回 400 Bad Request。

请求 URL 示例：

http://localhost:3000/_next/image?url=http%3A%2F%2F127.0.0.1%3A54321%2Fstorage%2Fv1%2Fobject%2Fpublic%2Fmedia%2F...webp&w=1080&q=75

响应内容："url" parameter is not allowed

排查过程

1. 检查 remotePatterns：原配置使用 new URL(pathname, baseUrl) 传入 remotePatterns，这是 Next.js 官方文档支持的写法，配置本身没问题。

2. 验证图片可访问：curl 直接请求 Supabase Storage API http://127.0.0.1:54321/storage/v1/object/public/media/...webp 返回 200 OK，图片和 Supabase 本地服务均正常。

3. 修正 protocol 格式（无效尝试）：猜测 new URL() 的 protocol 属性含冒号 （"http:" 而非 "http"）导致匹配失败，但修复后问题依旧。

4. 根因定位：查阅 Next.js 官方文档发现 images.dangerouslyAllowLocalIP 配置项。 Next.js 默认阻止图片优化服务访问 127.0.0.1、localhost、0.0.0.0、::1 等私有/回环 IP 地址，以防止服务端请求伪造（SSRF）攻击。请求在 remotePatterns 匹配成功后，仍在 IP 层被拦截。

查明的原因

Next.js 的 SSRF 防护默认拦截 private/local IP 图片请求。即使 remotePatterns 匹配成功，/_next/image 仍会在服务端 fetch 前检查目标 IP，发现 local/private 地址后返回 400。

关键配置：

images: {
  dangerouslyAllowLocalIP: false, // 默认值
}

采用的处理方式

在 next.config.ts 中启用 dangerouslyAllowLocalIP: true：

images: {
  formats: ["image/avif", "image/webp"],
  remotePatterns: [new URL("/storage/v1/object/public/media/**", supabaseUrl)],
  // 本地开发时允许优化来自本地 Supabase Storage 的图片
  dangerouslyAllowLocalIP: process.env.NODE_ENV === "development",
},

环境边界

• 开发环境（NODE_ENV === "development"）：Supabase 运行在本地 127.0.0.1:54321，必须开启。本地环境无外部攻击面，无 SSRF 风险。
• 生产环境（Vercel 部署）：Supabase 使用公网域名 https://<project>.supabase.co，图片 URL 为公网 IP，不触发 local IP 拦截，dangerouslyAllowLocalIP 可安全保持 false。

影响范围

• 所有在开发环境通过 Next.js <Image> 组件加载本地 Supabase Storage 图片的场景。
• 生产环境不受影响（公网域名）。
• unoptimized 属性的图片不经过 /_next/image 代理，不受此限制。

参考

• Next.js Image Component — remotePatterns
• Next.js Image Component — dangerouslyAllowLocalIP