Create React App构建部署后数据卡片加载失败求助

以下是针对你遇到的本地正常、build部署后数据加载失败问题的排查和解决步骤：

• 环境变量配置错误：
  CRA在build时只会注入以REACT_APP_开头的生产环境变量（来自.env.production），本地开发用的.env.development不会生效。检查：

  • 确保.env.production存在，且API地址配置正确（比如REACT_APP_API_URL=https://your-public-api.com）
  • 变量名必须带REACT_APP_前缀，否则会被CRA忽略
  • build后可以打开打包后的static/js/main.*.js文件，搜索你的API地址，确认是否正确注入

• CORS跨域问题：
  本地开发时CRA的proxy配置（package.json里的proxy字段）会帮你转发请求，但build后这个配置失效。解决方式：

  • 后端配置CORS，允许你的部署域名（比如Firebase Hosting的域名）发起请求
  • 用Firebase Hosting的rewrites配置，将前端API请求转发到后端（避免跨域）
  • 打开浏览器控制台（F12）的Network标签，查看请求是否有CORS相关的错误提示

• useEffect依赖或数据处理逻辑问题：
  本地热重载可能掩盖了依赖缺失或状态更新的问题，build后严格模式下执行逻辑更严格：

  • 检查useEffect的依赖数组，确保所有用到的外部变量都在依赖里（比如API地址如果是动态的，要加入依赖）
  • 确认数据获取后的状态更新逻辑，比如setData(res.data)是否正确，后端返回的是否是数组而非嵌套对象
  • 一定要在build部署后打开Console标签，查看是否有未捕获的错误（比如Axios请求失败的报错）

• API生产环境不可达：
  本地可能调用的是localhost的API，但部署后的前端无法访问本地服务。确认：

  • 你的SQL数据库后端已经部署到公网，API地址可以通过Postman直接访问并返回正确数组
  • 检查API地址是否有拼写错误（比如http/https、端口号）

• Axios全局配置问题：
  如果全局设置了Axios的baseURL，确保生产环境下这个地址是正确的，建议用环境变量动态配置：

  import axios from 'axios';
  axios.defaults.baseURL = process.env.REACT_APP_API_URL;
  

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