NextJS 13服务端组件fetch本地服务器报错TypeError: fetch failed

可能原因与解决步骤 #

1. 解决HTTPS自签名证书信任问题 #

本地HTTPS服务器的自签名证书在Node.js环境中默认不被信任，这是导致fetch失败的核心原因。可以通过配置undici的Agent跳过证书验证：

import { Agent } from 'undici';

async function getProducts(id: number) {
  // 创建忽略证书验证的Agent
  const agent = new Agent({
    connect: {
      rejectUnauthorized: false,
    },
  });

  const res = await fetch(`${process.env.LOCAL_SERVER}/api/products/category/${id}`, {
    agent,
    // 可选：禁用缓存避免旧响应干扰
    cache: 'no-store',
  });

  // 新增状态校验，快速定位请求问题
  if (!res.ok) {
    throw new Error(`请求失败，状态码：${res.status}`);
  }

  const products = await res.json();
  return Object.values(products) as ProductItem[];
}

2. 确认环境变量正确加载 #

• 确保.env文件放在NextJS项目根目录
• 修改环境变量后必须重启开发服务器
• 可临时打印变量值验证是否加载成功：

  console.log('LOCAL_SERVER:', process.env.LOCAL_SERVER);
  

3. 尝试切换到HTTP协议 #

如果本地服务器支持HTTP访问，直接修改.env配置规避证书问题：

LOCAL_SERVER=http://localhost:7187

4. 排查服务器可达性 #

若上述方案无效，检查服务端组件运行环境的网络可达性：

• 若使用Docker等容器化环境，localhost会指向容器内部，需替换为宿主机实际IP（如192.168.x.x）
• 在服务器终端执行curl -v https://localhost:7187/api/products/category/1（替换为你的请求路径），确认服务器是否正常响应

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