NextJS fetch 在调用 API 时出错

问：

我有一个组件定义为：

import Image from "next/image";
import { getNavBarLogo } from "../lib/website";

export async function NavBarLogo() {
const data = await getNavBarLogo();

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

我还有以下功能：getNavBarLogo()

export async function getNavBarLogo() {
  const query = qs.stringify(
    {
      populate: { SmallLogo: { fields: ["url"] } },
    },
    {
      encodeValuesOnly: true,
    }
  );

  const res = await fetch(
    env.NEXT_PUBLIC_STRAPI_API_URL + "/website" + "?" + query,
    {
      method: "GET",
      headers: {
        Authorization: `Bearer ${env.NEXT_PUBLIC_STRAPI_API_TOKEN}`,
        "Content-Type": "application/json",
      },
    }
  );
  if (!res.ok) {
    throw new Error(res.statusText);
  }
  const data = await res.json();
  console.log(env.API_BASE + data.data.attributes.SmallLogo.data.attributes.url)
  return {
    props: {
      logo: env.API_BASE + data.data.attributes.SmallLogo.data.attributes.url,
    },
  };
}

一切似乎都在运行，但 Chrome 开发者工具显示以下内容：

为什么它试图从 localhost 读取？我提供了一个 API URL 和一个令牌。我不明白错误告诉我什么。