问题描述

目标

我正在尝试从 Strapi API http://localhost:1337/articles 检索数据，但是当我尝试运行 11ty 构建时，我收到控制台错误（如下所示）。

我试过的

我试着看看是否有其他人有同样的问题，但我似乎找不到任何东西。我还查看了其他人的 Strapi 和 11ty 设置，看看我的常规设置是否有问题，一切似乎都很好。这个问题似乎是基于我的 blogposts.js 文件和strapi数据之间的连接。

用于发布数据的文件 (blogposts.js)

const fetch = require("node-fetch");

// function to get blogposts
async function getAllBlogposts() {
    // max number of records to fetch per query
    const recordsPerQuery = 100;

    // number of records to skip (start at 0)
    let recordsToSkip = 0;

    let makeNewQuery = true;

    let blogposts = [];

    // make queries until makeNewQuery is set to false
    while (makeNewQuery) {
        try {
            // initiate fetch
            const data = await fetch("http://localhost:1337/articles", {
                method: "POST",
                headers: {
                    "Content-Type": "application/json",
                    Accept: "application/json",
                },
                body: JSON.stringify({
                    query: `{
              articles {
              id
              Title
              Content
              published_at
              Cover
              Slug
            }
          }`,
                }),
            });

            // store the JSON response when promise resolves
            const response = await data.json();

            // handle CMS errors
            if (response.errors) {
                let errors = response.errors;
                errors.map((error) => {
                    console.log(error.message);
                });
                throw new Error("Houston... We have a CMS problem");
            }

            // update blogpost array with the data from the JSON response
            blogposts = blogposts.concat(response.data.articles);

            // prepare for next query
            recordsToSkip += recordsPerQuery;

            // stop querying if we are getting back less than the records we fetch per query
            if (response.data.articles.length < recordsPerQuery) {
                makeNewQuery = false;
            }
        } catch (error) {
            throw new Error(error);
        }
    }

    // format blogposts objects
    const blogpostsFormatted = blogposts.map((item) => {
        return {
            id: item.id,
            title: item.Title,
            slug: item.Slug,
            body: item.Content,
            cover: item.Cover,
            date: item.published_at
        };
    });

    // return formatted blogposts
    return blogpostsFormatted;
}

// export for 11ty
module.exports = getAllBlogposts

运行 npm 后出现控制台错误

> TypeError: Cannot read property 'articles' of undefined

`Error` was thrown:
    Error: TypeError: Cannot read property 'articles' of undefined
        at getAllBlogposts (C:\Users\Kaleshe\kaleshe.github.io\_data\blogposts.js:62:19)        
        at processTicksAndRejections (internal/process/task_queues.js:93:5)
        at async TemplateData.getDataValue (C:\Users\Kaleshe\AppData\Roaming\npm-cache\_npx\11352\node_modules\@11ty\eleventy\src\TemplateData.js:385:23)
        at async TemplateData.getAllGlobalData (C:\Users\Kaleshe\AppData\Roaming\npm-cache\_npx\11352\node_modules\@11ty\eleventy\src\TemplateData.js:228:18)
        at async TemplateData.getData (C:\Users\Kaleshe\AppData\Roaming\npm-cache\_npx\11352\node_modules\@11ty\eleventy\src\TemplateData.js:255:24)

Strapi 控制台错误消息

debug POST /articles (9 ms) 403

标签： graphqlstrapi

解释：

那么403错误响应码对应403 - Forbidden。这意味着您尝试访问的路由根本不允许您的用户角色访问。

现在，查看您的请求调用，很明显您不是经过身份验证的用户，因为您没有bearer在 api 请求上附加任何令牌。它表明您可能正在尝试访问公共 api。但不幸的是，它没有在strapi设置中标记为公开。

解决方案：

要使其正常工作，您需要允许此 api 用于公共角色。您可以通过访问user-permissions模块并编辑public角色的权限来执行此操作。

http://localhost:1337/admin/settings/users-permissions/roles

用户界面：

您应该会看到如下所示的界面，您可以在其中勾选apis您需要公开的内容。

参考：

角色和权限

graphql - 尝试使用 11ty 从 Strapi 发布数据时收到 403 错误