React搭建作品集网站调用Sanity.io接口返回400无法获取数据

400状态码本质是GROQ查询语法错误导致的请求无效，从你提供的报错链接可以看出，查询post类型数据的语句多了一个多余的右括号：*[_type=="post"])，这个额外括号导致Sanity服务器无法解析请求。

具体解决步骤如下：

• 修正博客列表页的查询语法：找到项目中查询post类型数据的代码，删除多余的右括号，正确的查询格式参考：

sanityClient.fetch(`*[_type=="post"]{
  title,
  slug,
  mainImage{
    asset->{
      _id,
      url
    },
    alt
  }
}`)

• 确认Sanity客户端配置正确：检查项目里的client.js文件，确认projectId、dataset参数和你Sanity后台的配置完全一致，同时检查Sanity后台的CORS设置，已经添加了你当前前端的访问域名（本地开发通常是http://localhost:3000）。
• 检查About页面相关配置：你提供的About页面代码本身的GROQ查询语法没有错误，若About页面也无法正常加载，需要确认两点：
  1. Sanity Studio中已经定义了author类型的schema
  2. 你已经在Sanity后台录入了至少一条author类型的内容
• 优化图片链接生成逻辑：你当前About页面的查询中已经直接取了image.asset->url作为authorImage的值，后续渲染时可以直接把该值赋值给img的src属性，不需要再调用urlFor方法重复处理。

报错截图参考：

内容的提问来源于stack exchange，提问作者Prithesh Dwivedi