使用Next.js getStaticProps无法获取Strapi数据的问题求助

我尝试在静态生成的Next.js应用中展示Strapi的内容。本地同时运行Strapi（端口localhost:1337）和Next.js（端口localhost:4200），且已禁用Strapi的CORS配置：

{
    name: 'strapi::cors',
    config: {
      enabled: false,
      origin: ['*'],
      methods: ['GET', 'POST', 'PUT', 'PATCH', 'DELETE', 'HEAD', 'OPTIONS'],
      headers: '*'
    },
},

当我在getStaticProps中尝试获取数据时，收到如下错误：

cause: Error: connect ECONNREFUSED ::1:1337
      at TCPConnectWrap.afterConnect [as oncomplete] (node:net:1300:16) {
    errno: -61,
    code: 'ECONNREFUSED',
    syscall: 'connect',
    address: '::1',
    port: 1337
  }

我的getStaticProps代码如下：

export async function getStaticProps() {
  try {
    const res = await fetch('http://localhost:1337/api/pages/2');
    const pages = await res.json();

    return {
      props: { title: pages.data.attributes.title },
    };
  } catch (err) {
    return { props: { title: 'failed' } };
  }
}

有趣的是，若在useEffect钩子中使用相同的获取逻辑却能正常工作：

useEffect(() => {
   getStaticProps();
 }, []);

请问这是什么原因？

核心问题是代码运行环境不同导致的网络解析差异：

• getStaticProps是在Node.js服务端/构建阶段执行的，Node.js解析localhost时默认优先用IPv6地址::1，如果你的Strapi没有绑定IPv6，只绑定了IPv4的127.0.0.1，就会出现连接被拒绝的错误。
• useEffect里的代码是在浏览器端运行的，浏览器解析localhost时一般优先用IPv4的127.0.0.1，刚好能连上你的Strapi服务，所以正常工作。

可行的解决办法 #

• 直接用127.0.0.1替代localhost：
  修改getStaticProps中的请求地址：

  const res = await fetch('http://127.0.0.1:1337/api/pages/2');
  

• 让Strapi同时监听IPv4和IPv6：
  在Strapi的config/server.js配置文件中修改host为::：

  module.exports = ({ env }) => ({
    host: env('HOST', '::'),
    port: env.int('PORT', 1337),
    // 其他原有配置
  });
  

• 强制Node.js优先用IPv4解析：
  启动Next.js时添加参数：

  next dev --dns-result-order=ipv4first
  

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