Next.js13.5+TypeScript调用Strapi接口fetch失败求助

我使用Next.js 13.5搭配TypeScript开发，后端采用Strapi。通过Postman测试GET请求可正常获取数据，但代码运行时出现错误：Unhandled Runtime Error Error: fetch failed Call Stack Object.fetch，无法定位问题。

页面代码 #

import Image from "next/image";
import config from "@/lib/config";

const fetchPosts = async () => {
  const requestOptions = {
    headers: {
      Authorization: `Bearer ${process.env.API_TOKEN}`,
    },
  };
  const request = await fetch(
    `${config.api}api/posts?populate=*`,
    requestOptions
  );
  const response = await request.json();
  return response;
};

const Home = async () => {
  const posts = await fetchPosts();
  console.log(posts);
  return (
    <main>
      <div className="p-5 bg-primary">Hello</div>
    </main>
  );
};

export default Home;

config文件代码 #

const config = {
  api: "http://localhost:1337/",
};
export default config;

排查方案 #

• 环境变量校验：先确认API_TOKEN是否在.env.local中正确配置，且值和Postman使用的一致。可以在fetchPosts函数里添加console.log(process.env.API_TOKEN)，查看控制台输出是否为空或错误。
• CORS配置检查：Postman不受浏览器CORS限制，但前端会触发。修改Strapi的config/middlewares.js，确保允许前端域名（如http://localhost:3000）的请求：

  module.exports = [
    // 其他中间件
    {
      name: 'strapi::cors',
      config: {
        origin: ['http://localhost:3000'],
        methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
        headers: ['Content-Type', 'Authorization'],
      },
    },
    // 其他中间件
  ];
  

• 添加错误捕获逻辑：当前代码未处理请求失败场景，比如网络中断、非200状态码，添加try-catch和状态码校验：

  const fetchPosts = async () => {
    try {
      const requestOptions = {
        headers: {
          Authorization: `Bearer ${process.env.API_TOKEN}`,
        },
      };
      const request = await fetch(`${config.api}api/posts?populate=*`, requestOptions);
      if (!request.ok) {
        throw new Error(`请求失败：${request.status} ${request.statusText}`);
      }
      const response = await request.json();
      return response;
    } catch (error) {
      console.error('获取数据失败:', error);
      throw error;
    }
  };
  

• 调整Next.js fetch缓存策略：如果使用App Router，组件内的fetch默认是静态获取，构建时会请求localhost的Strapi（若Strapi未启动则失败）。给fetch添加cache: 'no-store'改为动态获取：

  const request = await fetch(`${config.api}api/posts?populate=*`, {
    ...requestOptions,
    cache: 'no-store',
  });
  

• 网络访问校验：如果是容器化环境（如Docker），localhost:1337可能无法访问Strapi，需替换为容器间可访问的地址（如Strapi容器名称）。本地开发可先排除此情况。

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