React网站部署GoDaddy后Sanity CMS内容无法显示求助

问题描述 #

我有一个接入Sanity CMS的React网站，本地运行时所有内容均可正常加载；但执行构建并部署至GoDaddy后，Sanity内容无法显示。控制台仅打印Sanity Client Initialized:，无报错但无法渲染内容。

当前使用的client.js代码：

import sanityClient from '@sanity/client';
import imageUrlBuilder from '@sanity/image-url';

export const client = sanityClient({
    projectId: process.env.REACT_APP_SANITY_PROJECT_ID,
    dataset: 'production',
    apiVersion: '2022-02-01',
    useCdn: true, // Set to false if you need real-time updates
    // Do NOT include token here if running on the frontend!
}); 

const builder = imageUrlBuilder(client);
export const urlFor = (source) => builder.image(source);

// Debugging: Expose properly in DevTools
console.log("Sanity Client Initialized:", client); 
window.sanityClient = client; // Expose initialized client

export default client;

更新前的原client.js代码：

import sanityClient from '@sanity/client'
import imageUrlBuilder from '@sanity/image-url'

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

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


// Added by Adam Jan 31, 2025 b/c sanity not loading when uploaded
console.log("Sanity Client:", sanityClient); // Log in console
Window.sanityClient = sanityClient; // Expose globally for DevTools

export default sanityClient;

排查与解决步骤 #

1. 检查GoDaddy环境变量配置 #

本地开发时.env文件中的REACT_APP_SANITY_PROJECT_ID可正常读取，但GoDaddy部署需手动配置：

• 登录GoDaddy主机管理面板，找到对应网站项目
• 进入「环境变量」或「站点配置」选项，添加REACT_APP_SANITY_PROJECT_ID，值与本地.env保持一致
• 注意：React构建时会将环境变量嵌入静态文件，若部署前未配置，构建后代码中会出现undefined，直接导致Sanity客户端初始化失败

2. 修正Sanity CORS跨域配置 #

Sanity默认限制跨域请求，本地http://localhost:3000可能已加入白名单，但部署域名未配置：

• 登录Sanity管理后台，进入项目设置
• 找到「CORS origins」选项，添加部署域名（需包含http://或https://前缀）
• 按需勾选「Allow credentials」，保存配置

3. 确保构建时环境变量已注入 #

若手动构建后上传到GoDaddy，需保证构建过程中环境变量正常加载：

• 避免直接上传本地构建文件，优先在配置好环境变量的环境下构建，或使用GoDaddy自带的构建工具
• 可临时将projectId硬编码到client.js中测试（测试完成后务必改回环境变量，防止敏感信息泄露）

4. 排查CDN缓存问题 #

当前配置useCdn: true，可能存在Sanity CDN缓存未更新或内容未同步的情况：

• 临时将useCdn改为false，部署后测试是否能加载内容（若正常，说明是CDN缓存问题，等待缓存自动更新或手动刷新Sanity CDN）
• 确认Sanity后台的内容已发布到production数据集，未发布内容不会被CDN返回

5. 调试建议 #

• 在控制台打印环境变量，确认是否加载成功：

  console.log("Sanity Project ID:", process.env.REACT_APP_SANITY_PROJECT_ID);
  

• 手动发起Sanity请求，查看具体报错：

  client.fetch('*[_type == "你的文档类型"][0]')
    .then(data => console.log("Sanity返回数据:", data))
    .catch(err => console.error("Sanity请求错误:", err));
  

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