NextJS部署Vercel生产环境时触发INVALID_IMAGE_OPTIMIZE_REQUEST错误

我之前也碰到过类似的问题，结合你描述的场景——staging能正常拉取生产S3的图片、生产环境能拉取staging S3的图片，但生产环境拉自己S3的图就报INVALID_IMAGE_OPTIMIZE_REQUEST——大概率是Next.js图片优化的域名配置在Vercel生产环境的校验逻辑导致的，咱们一步步来排查解决：

核心问题分析 #

你当前在next.config.js里用的是domains数组来配置允许的图片源，这个方式虽然简单，但Vercel生产环境对S3这类对象存储的域名校验会更严格，而且Next.js 12.3版本之后官方更推荐用remotePatterns来做精确的源匹配，旧的domains配置在生产环境可能会触发校验异常。

解决方案步骤 #

1. 替换domains为remotePatterns配置

把原来的domains数组替换成更精确的remotePatterns，这样Vercel生产环境能准确识别允许的图片源，避免优化请求被拦截。修改后的next.config.js如下：

module.exports = {
  ...
  reactStrictMode: true,
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'xxfiles-prod.s3.eu-west-3.amazonaws.com',
        port: '',
        pathname: '/**', // 允许该域名下所有路径的图片
      },
      {
        protocol: 'https',
        hostname: 'xxfiles-staging.s3.eu-west-3.amazonaws.com',
        port: '',
        pathname: '/**',
      },
      {
        protocol: 'http',
        hostname: 'localhost',
        port: '3000', // 本地开发端口可根据实际情况调整
        pathname: '/**',
      },
    ],
  },
}

2. 检查S3桶的CORS配置

确保生产S3桶的CORS规则允许你的Vercel生产域名访问，否则也可能导致图片优化请求失败。在S3控制台的CORS配置里添加类似规则：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
<CORSRule>
    <AllowedOrigin>https://你的生产Vercel域名.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
<CORSRule>
    <AllowedOrigin>https://你的staging Vercel域名.com</AllowedOrigin>
    <AllowedMethod>GET</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>
</CORSConfiguration>

3. 清除Vercel缓存并重新部署

有时候Vercel会缓存旧的配置，导致新的图片规则不生效。在Vercel控制台重新部署项目时，记得勾选「清除构建缓存」选项，确保新的配置被正确加载。

总结 #

优先尝试替换成remotePatterns配置，这是解决这类Vercel生产环境图片优化错误最常见的方法。如果还是不行，再检查S3的CORS配置和缓存问题，一般就能解决啦。

备注：内容来源于stack exchange，提问作者Puttsche