11ty构建时调用Strapi /articles接口POST请求返回403报错无法获取数据

你遇到的两个报错为因果关系：Strapi返回403未授权错误，接口没有返回预期的数据结构，导致代码中response.data为undefined，访问response.data.articles时自然抛出类型错误。

第一步：修复Strapi接口权限 #

403错误是因为Strapi默认禁止未授权用户访问内容接口，按以下操作开放权限：

• 打开Strapi管理后台，依次进入「设置」→「用户与权限插件」→「角色」→「Public（公共角色）」
• 在权限列表中找到你创建的Articles内容类型，勾选find、findOne权限，如果你使用GraphQL接口，需要同时勾选GraphQL相关的查询权限
• 保存设置后先手动测试接口：用Postman发送和代码中一致的POST请求到对应地址，确认返回200状态码且包含data字段后，再执行11ty构建

第二步：给代码增加容错逻辑 #

避免后续接口异常时直接抛出未捕获的错误，找到代码中处理响应的对应位置，新增数据存在性判断：

// 原有错误判断逻辑不变
if (response.errors) {
    let errors = response.errors;
    errors.map((error) => {
        console.log(error.message);
    });
    throw new Error("CMS接口返回错误");
}
// 新增容错判断
if (!response?.data?.articles) {
    console.error("接口返回数据不符合预期，完整响应内容：", response);
    throw new Error("获取文章数据失败，请检查Strapi接口配置");
}
// 原有数据拼接逻辑不变
blogposts = blogposts.concat(response.data.articles);

第三步：可选排查项（如果前两步操作后仍有问题） #

• 确认你使用的Strapi版本：如果是Strapi v4及以上版本，默认GraphQL接口地址为http://localhost:1337/graphql，不是/articles，需要修改fetch请求的目标地址
• 确认Strapi中已安装启用GraphQL插件，未安装插件的情况下无法处理GraphQL格式的查询请求
• 核对GraphQL查询语句中的字段名和Strapi内容类型中的字段名完全匹配，Strapi默认使用小驼峰命名，如果你内容类型中的字段为title而非Title，需要同步修改查询语句中的字段名

内容的提问来源于stack exchange，提问作者Kaleshe Alleyne-Vassel