如何通过API使用NextJs在前端获取strapi-plugin-sitemap创建的sitemap.xml文件？

Question

我在 Strapi 中使用 Strapi-plugin-sitemap 创建了站点地图。它在 Strapi 端工作正常，但我需要将它放在前端。

这是软件包 - https://www.npmjs.com/package/strapi-plugin-sitemap

提前致谢。

Answer 1

这取决于您的前端应用程序。 我假设您面临着我不久前遇到的同样问题 - 站点地图需要托管在同一域上才能与 Google Search Console 等正常工作。

对于 Nuxt 3 应用程序，我创建了一个非常简单的服务器路由，用于读取 Strapi 站点地图 XML，然后在访问应用程序的站点地图 URL 时呈现它。

因此，对于 Nuxt 3 应用程序，假设需要通过 URL 访问站点地图：

https://yourwebsite.com/sitemap/index.xml

然后，我们需要创建一个服务器路由：

server/routes/sitemap/index.xml.ts

包含此内容：

export default defineEventHandler(async (event) => {
  try {
    const xmlResult = await $fetch(
      'https://cms.yourstrapiurl.com/api/sitemap/index.xml',
      {
        headers: {
          'Content-Type': 'application/xml',
        },
      },
    )

    if (!xmlResult) {
      throw createApiError(RESPONSE_STATUS_CODE.FORBIDDEN)
    }

    event.node.res.setHeader('Content-Type', 'text/xml')
    event.node.res.end(xmlResult)
  } catch (e) {
    throw createApiError(e)
  }
})

Answer 2

它将站点地图定位在相对于 Strapi 根的

/sitemap/index.xml

。

您的后端真的需要站点地图吗？有一个官方文档插件，它添加了 OpenAPI 规范，您也可以在前端中解析该规范； https://www.npmjs.com/package/@strapi/plugin-documentation