NextJS调用API时fetch报错，为何请求指向localhost？

为什么请求指向localhost？ #

这是Next.js Image组件的默认行为：它会把所有图片请求转发到本地的图片优化服务（localhost:3000/_next/image），由这个服务负责图片压缩、格式转换等优化操作后再返回给浏览器。你看到的localhost请求就是这个转发过程的体现。

报错的核心原因是：你的图片源域名没有被添加到Next.js的允许列表中，导致优化服务拒绝处理跨域图片请求。

解决方案 #

1. 配置Next.js允许图片源域名

在项目根目录的next.config.js中，添加images.remotePatterns（Next.js 13及以上版本）或images.domains（旧版本），将你的Strapi图片域名加入允许列表：

/** @type {import('next').NextConfig} */
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: '你的Strapi域名', // 替换为实际的Strapi域名，比如xxx-strapi.com
        pathname: '/**',
      },
    ],
    // 若使用Next.js旧版本，改用以下配置：
    // domains: ['你的Strapi域名'],
  },
};

module.exports = nextConfig;

2. 检查环境变量的可用性

• 如果你在客户端组件中调用getNavBarLogo，确保env.API_BASE带有NEXT_PUBLIC_前缀（比如NEXT_PUBLIC_API_BASE），否则客户端无法读取这个变量，会导致拼接出错误的图片URL（比如undefined + 路径，间接引发localhost相关错误）。
• 验证env.API_BASE + data.data.attributes.SmallLogo.data.attributes.url拼接后是完整可访问的图片URL（比如https://xxx-strapi.com/uploads/logo.png）。

3. 可选：禁用图片优化

如果不需要Next.js的图片优化功能，可以直接给Image组件添加unoptimized属性，跳过本地转发，直接请求原图片URL：

<Image
  className="h-18 w-auto"
  src={data.props.logo}
  alt="Logo"
  height={40}
  width={40}
  unoptimized
/>

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