在 Next.js 13+（App Router）中通过 fetch 请求 Strapi 接口时出现 ECONNREFUSED 或 fetch failed 错误，通常并非网络连通性问题，而是因 Strapi 默认启用了 API Token 鉴权机制，未携带合法 Authorization: Bearer <token> 头导致请求被拒绝。
在 next.js 13+（app router）中通过 `fetch` 请求 strapi 接口时出现 `econnrefused` 或 `fetch failed` 错误，通常并非网络连通性问题，而是因 strapi 默认启用了 api token 鉴权机制，未携带合法 `authorization: bearer
Strapi v4 默认对所有 REST API 端点（包括公开的 GET /api/items）实施严格的访问控制策略。即使接口在 Strapi Admin 中配置为“Public”角色可读，仍必须提供有效的 API Token —— 这是 Strapi v4.12+ 的强制安全要求，与 CORS、本地地址（localhost vs 127.0.0.1）或 Node.js 版本无关。
✅ 正确做法：添加 Authorization Header
你需要在 fetch 调用中显式传入包含 Bearer Token 的 headers 对象：
export const getItems = async () => {
const STRAPI_TOKEN = process.env.STRAPI_API_TOKEN; // 建议从环境变量读取
if (!STRAPI_TOKEN) {
throw new Error("Missing STRAPI_API_TOKEN in environment variables");
}
try {
const res = await fetch(
"http://localhost:1337/api/items?populate=*",
{
headers: {
Authorization: `Bearer ${STRAPI_TOKEN}`,
"Content-Type": "application/json",
},
}
);
if (!res.ok) {
throw new Error(`HTTP error! status: ${res.status}`);
}
return res.json();
} catch (err) {
console.error("Failed to fetch items from Strapi:", err);
throw err;
}
};⚠️ 注意：Authorization 头值必须严格为 Bearer <your-token>（注意 Bearer 后有一个空格），大小写敏感；<your-token> 是你在 Strapi Admin 中创建的 Full Access 或 Custom 类型 API Token。
? 如何获取并配置 API Token？
- 登录 Strapi Admin 后台（如 http://localhost:1337/admin）
- 进入 Settings → API Tokens → Create new API Token
- 选择类型（推荐首次调试使用 Full access）
- 填写名称（如 nextjs-app-read），点击 Save
- 复制生成的 Token 字符串（⚠️ 仅显示一次！丢失需重新创建）
- 在 Next.js 项目根目录的 .env.local 中安全配置：
STRAPI_API_TOKEN=your_very_long_api_token_here_xxxxxx
✅ Next.js 会自动将 process.env.STRAPI_API_TOKEN 注入服务端组件（Server Components）和 async Server Actions，无需额外配置 serverComponentsExternalPackages（v13.4+ 默认支持）。
? 补充建议与最佳实践
- 避免硬编码 Token：永远不要将 Token 写死在代码中，务必通过环境变量管理。
- 区分环境：为开发、预发、生产环境分别创建不同 Token，并在 .env.development / .env.production 中对应配置。
- 错误处理增强：捕获 TypeError（如网络中断）和 HTTP 4xx/5xx 响应，便于定位是鉴权失败（401 Unauthorized）还是其他问题。
- Strapi 端验证：可在 Strapi 日志中查看是否收到带 Authorization 头的请求（yarn develop 启动时控制台会打印请求日志）。
- 不推荐降级方案：关闭 Strapi 的 API Token 验证（如修改 config/middlewares.js）会严重削弱安全性，切勿在生产环境启用。
遵循以上步骤后，你的 Next.js 页面即可稳定、安全地从 Strapi 获取数据。核心要点始终是：Strapi v4 的 REST API 不再接受无鉴权的请求，Authorization: Bearer <token> 是必需项，而非可选项。
