无头CMS GraphQL接口调用，前端获取内容
无头CMS只负责管理内容，前端通过API获取数据来展示。
GraphQL是目前常见的接口方式，它能让你一次请求拿到多个字段，避免多次网络请求。
本文从零开始，带你完成无头CMS的GraphQL接口配置、前端调用和结果验证，适合刚接触前后端分离的开发者。
环境准备与CMS接口开启
开始前，你需要一个可访问的无头CMS后台（如Strapi、Directus或Ghost），并确认服务器已安装Node.js和npm。
以Strapi为例，默认GraphQL插件可能未启用。
登录CMS管理后台，进入“插件市场”或“设置”中的“插件”页面，找到GraphQL插件并点击启用。
如果使用命令行创建的项目，可以安装依赖：
npm install @strapi/plugin-graphql安装后重启服务，
访问 http:，
//你的域名:
1337/graphql
如果看到GraphQL Playground界面，
说明接口已开启。注意：
生产环境建议关闭Playground，
只保留API端点。
编写并测试GraphQL查询
在Playground中，左侧输入查询语句，右侧会返回JSON数据。
例如获取文章列表的标题和摘要：
query {
articles {
data {
attributes {
title
summary
}
}
}
}点击运行按钮，如果返回包含data字段的JSON，说明查询正确。
如果报错“Cannot query field”，检查字段名是否与CMS内容模型一致。
关键点：GraphQL查询必须严格按照CMS定义的Schema编写，字段名大小写敏感。 你可以在Playground右侧的“Docs”标签中查看所有可用字段。
前端调用接口获取内容
前端项目通常使用fetch或axios发送POST请求。
以下是一个使用原生fetch的示例，假设CMS地址为https://cms.example.com：
const query = `
query {
articles {
data {
attributes {
title
summary
}
}
}
}
`;
fetch('https://cms.example.com/graphql', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ query })
})
.then(res => res.json())
.then(result => console.log(result.data.articles.data))
.catch(error => console.error('请求失败:', error));如果遇到跨域错误，需要在CMS服务器配置CORS。
以Strapi为例，编辑config/middlewares.js，在strapi::cors中设置origin: ['http://你的前端域名']。
常见报错与避坑指南
报错1：401 Unauthorized
原因：接口需要API Token。解决方法：在CMS后台“设置”->“API令牌”中创建令牌，并在请求头添加Authorization: Bearer 你的令牌。
报错2：Cannot query field "xxx"
原因：查询字段不存在或拼写错误。解决方法：在Playground的Docs中确认字段名，注意复数形式。
报错3：CORS policy blocked
原因：前端域名未在CMS的CORS白名单中。解决方法：修改CMS的CORS配置，添加前端域名。
避坑：不要在前端代码中硬编码API令牌，建议通过环境变量注入，避免泄露。
验证数据是否正常获取
在前端页面中，将获取的数据渲染到列表。
打开浏览器开发者工具的“网络”面板，查看GraphQL请求的响应状态是否为200，响应体中是否包含预期字段。
如果页面显示空白，检查控制台是否有JavaScript错误，并确认数据路径是否正确（例如result.data.articles.data）。
最终验证标准：前端页面能正确显示CMS中发布的文章标题和摘要，且刷新后内容不变。
常见疑问
问：GraphQL和REST API有什么区别？
答：GraphQL允许前端指定需要哪些字段，一次请求获取多个资源；REST通常返回固定结构，可能包含多余数据。无头CMS两种方式都支持，按项目需求选择。
问：必须使用GraphQL吗？
答：不是。如果团队更熟悉REST，可以继续使用REST接口。GraphQL适合字段灵活、请求次数敏感的场景。
问：如何分页获取大量内容？
答：在查询中添加pagination参数，例如articles(pagination: { page: 1, pageSize: 10 })，具体语法参考CMS官方文档。
问：接口调用速度慢怎么优化？
答：只请求必要字段，避免嵌套过深；在CMS端开启缓存或使用CDN加速；前端可做本地缓存减少重复请求。
如果按上述步骤操作后仍无法获取内容，优先检查API令牌、CORS和字段名。
无头CMS的GraphQL接口调用并不复杂，关键是理清Schema和请求格式。
