Next.js 13+ 中调用 Strapi REST API 的正确鉴权方式-js教程-PHP中文网

在 Next.js 13+（App Router）中通过 fetch 请求 Strapi 接口时出现 ECONNREFUSED 或 fetch failed 错误，通常并非网络连通性问题，而是因 Strapi 默认启用了 API Token 鉴权机制，未携带合法 Authorization: Bearer 头导致请求被拒绝。

在 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 （注意 Bearer 后有一个空格），大小写敏感；是你在 Strapi Admin 中创建的 Full Access 或 Custom 类型 API Token。

chartjs-reporter
此技能用于在用户需要将结构化数据（查询结果、CSV 摘要、JSON 记录或 Python 字典/列表）转换为独立的 HTML 页面时使用。

下载

? 如何获取并配置 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）会严重削弱安全性，切勿在生产环境启用。