使用React与Sanity搭建作品集网站时遇到CORS策略错误的技术求助

我太懂这种卡壳的感觉了——搭作品集网站本来就够忙活的，结果被CORS策略拦下来，看着控制台的红报错真的头大。别慌，咱们来一步步解决这个问题。

先搞懂为啥会报错 #

你遇到的错误核心是：当请求需要携带凭证（比如cookie、HTTP认证信息）时，浏览器不允许服务器返回的Access-Control-Allow-Origin头是通配符*。你的Sanity请求默认带了凭证（withCredentials属性是include），但Sanity那边的CORS配置可能用了*，这就触发了浏览器的安全拦截。

解决方案：修改Sanity的CORS配置 #

这是最关键的一步，直接在Sanity后台调整：

1. 打开Sanity管理控制台，找到你的作品集项目
2. 左侧菜单进入 Settings > API，找到CORS origins区域
3. 删掉现有的通配符*规则，点击Add CORS origin
4. 输入你的本地开发地址：http://localhost:3000，然后勾选Allow credentials选项
5. 点击Save，等1-2分钟让配置生效（有时候缓存会拖一会儿）

检查你的Sanity客户端配置（可选） #

去看看你../../client里的客户端初始化代码，确保没有手动把withCredentials设为false。正常的配置应该类似这样：

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

export const client = createClient({
  projectId: '你的项目ID',
  dataset: 'production',
  apiVersion: '2022-10-26', // 用你指定的API版本
  useCdn: true, // 开发环境可以暂时关闭CDN调试，生产再打开
  // withCredentials: true, // 一般默认是true，不用手动写，但如果之前改了就改回来
});

验证修复效果 #

重启你的React开发服务器，刷新页面后再看控制台——应该不会再出现那个CORS错误了，你的abouts数据也能正常加载到页面上。

额外提醒（部署时要注意） #

等你把网站部署到生产环境时，记得把你的生产域名（比如https://yourportfolio.com）也添加到Sanity的CORS origins里，同样要勾选Allow credentials，不然生产环境也会遇到同样的问题。

你的React代码本身没毛病，问题就出在Sanity的CORS规则配置上，调整完应该就能正常获取数据啦！

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