Next.js 14加载Getstream CDN图片报403但显示正常的问题咨询

问题描述 #

我在Next.js 14项目中使用Getstream开发聊天应用，开发展示群聊描述的组件时，需要加载从Getstream的channel.data对象中获取的头像图片。

获取并渲染图片的代码 #

const { channel } = useChannelStateContext();
const channelImage = channel.data?.image as string | undefined;

// image gets passed through multiple components

<Image
  src={channelImage}
  alt="Channel Avatar"
  width={40}
  height={40}
  className="object-cover"
/>

Next.js配置（next.config.mjs） #

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "dublin.stream-io-cdn.com",
    },
    {
      protocol: "https",
      hostname: "img.clerk.com",
    },
  ],
},

报错信息 #

本地环境图片显示正常，但VsCode控制台出现403错误：

upstream image response failed for https://dublin.stream-io-cdn.com/... 403
ImageError: "url" parameter is valid but upstream response is invalid
at fetchExternalImage (...)
at async DevServer.imageOptimizer (...)
at async cacheEntry.imageResponseCache.get.incrementalCache (...)
at async (...)
{
  statusCode: 403
}

使用版本 #

"next": "14.2.5",
"stream-chat": "^8.37.0",
"stream-chat-react": "^11.23.3",
"typescript": "^5"

已尝试操作：

• 验证图片URL可在浏览器正常加载
• 在next.config.mjs中设置unoptimized: true，但图片无法显示

疑问：

1. 为何Next.js会在图片显示正常的情况下记录403错误？
2. 该问题是否会在生产环境引发问题，能否忽略？
3. 有哪些推荐方案可在保持性能与可靠性的前提下解决此问题？

解答与解决方案 #

1. 显示正常但控制台报403的原因 #

Next.js的Image组件默认启用图片优化服务，本地开发时DevServer会作为代理请求远程图片（用于压缩、格式转换等优化）。但Getstream的CDN可能会拒绝非浏览器来源的请求——比如Next.js服务器端请求没有携带浏览器的Referer或User-Agent头，导致代理请求返回403。而浏览器会直接发起图片请求，所以前端能正常显示，只有DevServer的代理请求失败报错。

2. 生产环境是否会受影响？ #

大概率会出问题。生产环境中Next.js的图片优化服务同样会代理请求图片，如果Getstream CDN依然拒绝服务器端请求，会导致图片加载失败、延迟或报错，不能忽略。

3. 推荐解决方案 #

方案一：给Next.js代理请求添加合规请求头

修改next.config.mjs，给Getstream CDN的远程规则添加模拟浏览器的请求头，让代理请求通过CDN校验：

images: {
  remotePatterns: [
    {
      protocol: "https",
      hostname: "dublin.stream-io-cdn.com",
      headers: {
        'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/126.0.0.0 Safari/537.36'
      }
    },
    {
      protocol: "https",
      hostname: "img.clerk.com",
    },
  ],
},

此方案能保留Next.js的图片优化能力，同时解决403问题。

方案二：使用Getstream内置的图片优化参数

Getstream的图片URL支持通过查询参数指定尺寸、格式等优化选项，直接生成适配的图片URL，减少Next.js代理的依赖：

// 给原始URL添加Getstream优化参数
const optimizedChannelImage = channelImage 
  ? `${channelImage}?w=40&h=40&format=webp` 
  : undefined;

<Image
  src={optimizedChannelImage}
  alt="Channel Avatar"
  width={40}
  height={40}
  className="object-cover"
/>

若仍触发403，可结合方案一的请求头配置使用。

方案三：临时改用原生<img>标签

如果上述方案均不生效，可暂时用原生<img>标签替代Next.js的Image组件，牺牲部分优化特性确保兼容性：

{channelImage && (
  <img
    src={channelImage}
    alt="Channel Avatar"
    width={40}
    height={40}
    className="object-cover"
  />
)}

适合临时解决或小尺寸图片场景，但会失去Next.js自动格式转换、懒加载等优化功能。

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