React集成Sanity后发布文档不显示且报CORS错误

你遇到的动态内容无法渲染问题，根因就是控制台抛出的CORS跨域错误，和React组件逻辑、Sanity schema定义无关。

浏览器同源策略会直接拦截未被授权的跨域请求，你的前端域名没有加入Sanity项目的跨域白名单，导致client.fetch请求根本没拿到返回数据，abouts状态一直保持初始空数组，所以动态div区域没有内容，只有写死的静态h2标签能正常显示。

• 登录Sanity管理后台，进入当前对接的目标项目
• 在侧边栏找到「API」入口，切换到「CORS origins」配置板块
• 点击「Add CORS origin」按钮，添加你的前端访问地址：本地开发阶段默认填http://localhost:3000，如果是线上部署环境就填站点的正式线上域名
• 配置项里的「Allow credentials」如果没有做Sanity用户登录鉴权的需求，保持关闭即可，你当前用token拉取公开内容不需要开启该选项
• 保存配置后等待1-2分钟配置生效，重启本地前端开发服务，刷新页面即可正常拉取内容

• 确认项目根目录.env文件中的环境变量命名完全匹配client.js中的读取逻辑：变量名必须以REACT_APP_开头，即REACT_APP_SANITY_PROJECT_ID、REACT_APP_SANITY_TOKEN，Create React App脚手架不会识别非此前缀的环境变量，变量名错误会导致参数值为undefined，请求直接失败
• 确认你在Sanity后台新建的abouts文档已经点击右上角「Publish」完成发布，仅保存为草稿的内容无法被开启CDN的生产环境接口拉取到
• 新发布内容如果存在CDN缓存延迟，可以临时把client.js中的useCdn参数改为false调试，确认内容拉取正常后再改回true走CDN节点加速

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