MERN栈生产环境下React Big Calendar无法显示事件

核心背景 #

开发环境正常，生产环境（DigitalOcean Docker部署）任务功能正常，但日历事件不显示。从代码看，任务和事件的后端逻辑高度相似，问题大概率出在事件特有的处理环节或生产环境的配置差异上。

第一步：先抓现场日志 #

前端控制台排查 #

1. 打开浏览器开发者工具 → Network标签：
   • 找到/api/events的请求，查看状态码（200？403？500？）、响应内容。
   • 如果是403，直接指向CORS问题；如果是200但响应为空，说明数据库没数据或后端查询有问题；如果是500，看后端日志。
2. 打开Console标签：
   • 检查是否有报错信息（比如CORS错误、日期转换错误、API路径错误）。
   • 确认Fetched events:的打印内容，是否有数据返回。

后端Docker日志排查 #

执行命令查看后端容器日志：

docker logs <你的后端容器名称/ID>

• 检查是否有GET /api/events received的日志，确认后端收到了请求。
• 检查Fetched events:的打印内容，确认后端从MongoDB拿到了数据。

第二步：针对性排查可能的问题 #

1. 日期格式/时区问题（最常见） #

React Big Calendar对start/end字段的Date对象有效性要求严格，生产环境的时区差异或数据库日期格式问题容易导致无效日期：

• 前端验证：在CalendarPanel的fetchEvents中添加日志，检查每个事件的日期转换结果：

  const formattedEvents = data.map(event => {
    const startDate = new Date(event.start);
    const endDate = new Date(event.end);
    console.log(`事件${event.title}: 原始start=${event.start}, 转换后=${startDate}, 是否有效=${!isNaN(startDate.getTime())}`);
    console.log(`事件${event.title}: 原始end=${event.end}, 转换后=${endDate}, 是否有效=${!isNaN(endDate.getTime())}`);
    return {
      ...event,
      start: startDate,
      end: endDate,
    };
  });
  

  如果发现无效日期，改用date-fns的parseISO函数（更可靠）：

  import { parseISO } from 'date-fns';
  
  const formattedEvents = data.map(event => ({
    ...event,
    start: parseISO(event.start),
    end: parseISO(event.end),
  }));
  

• 数据库验证：进入MongoDB容器，检查events集合的日期字段类型：

  docker exec -it <MongoDB容器名称> mongosh
  use <你的数据库名>
  db.events.find().pretty()
  

  确认start/end是ISODate("...")类型，而非字符串。

2. CORS配置遗漏 #

虽然任务API正常，但可能事件API的请求触发了未被允许的origin：

• 检查server.js中生产环境的allowedOrigins，是否包含了前端实际访问的域名（比如不带www的https://<sitename>.com）：

  : [
      "http://<sitename>.com",
      "https://<sitename>.com",
      "http://www.<sitename>.com",
      "https://www.<sitename>.com",
      "http://api.<sitename>.com",
      "https://api.<sitename>.com",
  ],
  

• 排查期间可以临时放宽CORS（仅用于测试）：将origin: (origin, callback) => {...}替换为origin: true，看是否能显示事件。

3. 生产环境数据库数据缺失 #

任务正常不代表events集合有数据：

• 按上面的MongoDB容器命令，查询db.events.countDocuments()，确认集合中有数据。

4. 依赖版本兼容问题 #

react-big-calendar@1.15.0与date-fns@4.1.0可能存在兼容性问题：

• 查看react-big-calendar官方文档，确认支持的date-fns版本，比如如果要求v3，则降级date-fns：

  npm install date-fns@3.x
  

  重新打包部署。

5. 环境变量配置错误 #

确认前端生产环境的VITE_API_URL是否正确：

• 检查生产环境的.env文件，确保VITE_API_URL是完整的API地址（比如https://api.<sitename>.com），没有拼写错误或遗漏协议/端口。

最后：验证修复 #

每修改一处配置或代码后，重新构建前端镜像、重启容器，然后刷新页面验证是否显示事件。

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