Next.js中使用CDN图片作为OG图片时URL被篡改的问题咨询

• 问题根源：Next.js会自动为相对路径补全站域名，但如果传入的是完整的绝对URL（包含https://），则不会进行拼接。你遇到的问题是因为传递的URL对象未被正确解析为字符串，导致Next将其识别为相对路径处理。

• 修复方案1：将URL转为字符串直接赋值
  修改generateMetadata中的openGraph配置，确保传入完整的绝对URL字符串：

  export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { url } = await getOgImage();
    // 根据返回的url格式调整：如果url是//cdn.images.com/image则拼接https:，如果已经是https开头直接用url
    const ogImageUrl = `https:${url}`;
  
    const metadata = metadataConfig
  
    return {
      ...metadata,
      openGraph: {
        images: ogImageUrl, // 直接传字符串形式的绝对URL
      },
      icons: {
        icon: '/favicon/favicon.ico',
      },
      applicationName: '...',
    };
  }
  

• 修复方案2：使用对象数组形式（推荐，可补充图片属性）
  若需要指定图片宽高、描述等信息，可采用数组对象的方式，确保url字段为完整绝对字符串：

  export async function generateMetadata({ params }: Props): Promise<Metadata> {
    const { url } = await getOgImage();
    const ogImageUrl = `https:${url}`;
  
    const metadata = metadataConfig
  
    return {
      ...metadata,
      openGraph: {
        images: [
          {
            url: ogImageUrl,
            width: 1200, // OG图片标准宽高比例
            height: 630,
            alt: '页面内容描述',
          },
        ],
      },
      icons: {
        icon: '/favicon/favicon.ico',
      },
      applicationName: '...',
    };
  }
  

• 注意事项：

  • 确认getOgImage()返回的url格式：如果已经是完整的https://cdn.images.com/image，无需拼接https:，直接使用url即可。
  • 避免直接传递URL对象给images字段，转为字符串后Next.js能正确识别为外部绝对URL，不会添加站点域名前缀。

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