如何部署React+Sanity应用到Netlify及解决内容不显示问题

内容无法加载的核心原因是Sanity服务端未配置对应请求来源的CORS白名单，和你贴出的React端client.js代码语法无关。Sanity默认会拦截所有未加入白名单的来源请求，响应头里不会携带Access-Control-Allow-Origin字段，直接触发浏览器跨域拦截策略，不管是本地开发环境还是Netlify生产环境的请求都会被挡住。

• 登录Sanity管理后台，进入当前作品集对应项目的设置页面，找到「API」分类下的「CORS origins」配置板块
• 添加本地开发地址http://localhost:3001到白名单，注意协议要和本地启动的服务一致，本地是http就不要填成https，否则配置无效
• 添加Netlify生产站点的完整域名到白名单，包括平台分配的netlify.app二级域名、后续绑定的自定义域名，协议统一填https
• 配置白名单时，如果前端只做公开内容的查询展示，不要勾选「Allow credentials」选项，避免不必要的权限风险；只有需要对接用户登录态写入/修改内容时才需要开启该选项
• 登录Netlify站点后台，进入「Site settings」下的环境变量配置页，确认已经正确添加REACT_APP_SANITY_PROJECT_ID、REACT_APP_SANITY_TOKEN两个环境变量，值和本地.env文件中保持一致，添加完成后重新触发一次生产部署

你贴出的client.js配置本身没有逻辑错误，核心参数配置正确，只要确认构建时环境变量能正常注入即可，参考代码如下：

export const client = sanityClient({
    projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
    dataset: 'denscholar',
    useCdn: true,
    apiVersion: '2022-02-01',
    token: process.env.REACT_APP_SANITY_TOKEN
})

const builder = imageUrlBuilder(client);

export const urlFor = (source) => builder.image(source)

CORS配置保存后1-2分钟就会生效，不需要重启服务，刷新页面即可正常拉取Sanity中的内容。如果后续更换部署域名、新增本地开发端口，记得同步把新的来源加入Sanity的CORS白名单。

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