Next.js 13客户端组件获取Sanity数据遇CORS错误求助

你在Next.js 13客户端组件中调用Sanity API时触发了跨域限制，错误提示如下：

从源'http://localhost:3000'访问XMLHttpRequest地址'https://rc70arjs.api.sanity.io/v2021-10-21/data/query/production?query=*%5B_type+%3D%3D+%22user%22%5D'时，被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头。

你的Sanity客户端配置：

const client = createClient({
   projectId: 'rc70arjs',
   dataset: 'production',
   apiVersion: '2021-10-21',
   useCdn: true
});

以下是几种可行的解决方法：

方法一：配置Sanity项目的CORS白名单 #

这是最直接的解决方案，需要在Sanity管理后台添加你的本地开发地址：

• 登录Sanity管理后台，找到目标项目
• 进入Settings > API页面
• 在CORS origins板块，点击Add CORS origin
• 输入http://localhost:3000，若需支持多端口或路径，可填http://localhost:3000/*；生产环境务必指定具体域名，不要用*
• 勾选Allow credentials（如果请求需要携带凭证），保存设置

方法二：用Next.js API路由做代理 #

若暂时无法修改Sanity的CORS配置，可通过本地API路由中转请求：

1. 在app/api目录下创建sanity/route.js文件：

import { createClient } from '@sanity/client';

const client = createClient({
  projectId: 'rc70arjs',
  dataset: 'production',
  apiVersion: '2021-10-21',
  useCdn: true,
  // 服务端调用无需CORS，如需访问私有数据可添加token
});

export async function GET(request) {
  try {
    const query = request.nextUrl.searchParams.get('query');
    const data = await client.fetch(query);
    return Response.json(data);
  } catch (error) {
    return Response.json({ error: error.message }, { status: 500 });
  }
}

2. 在客户端组件中请求本地API路由：

async function fetchUser() {
  const res = await fetch('/api/sanity?query=*[_type == "user"]');
  const users = await res.json();
  // 处理返回数据
}

方法三：调整Sanity客户端配置 #

• 临时将useCdn设为false，直接请求Sanity的原始API节点，排查是否是CDN的CORS配置问题
• 确认API版本是否为当前支持的稳定版本，避免因版本兼容导致的异常

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