React前端无法加载Node.js(Express)API数据的地域差异问题

1. 日期格式的地域解析差异 #

你前端传递的日期是10/02/2022，不同地区的日期格式习惯存在差异（比如部分地区遵循DD/MM/YYYY，部分遵循MM/DD/YYYY），而数据库的DATE()函数仅识别标准YYYY-MM-DD格式。如果用户所在地区的系统/浏览器将10/02/2022解析为2022-10-02（与你数据库中实际存储的2022-02-10不符），会导致SQL查询无结果；再加上前端未处理无结果或错误场景，页面会一直处于加载状态。

解决方法：

• 前端统一将日期转换为ISO标准格式后再传给API：

  // 格式化日期，规避地域解析差异
  const formatStandardDate = (dateStr) => {
    const [day, month, year] = dateStr.split('/');
    // 按DD/MM/YYYY输入转换为YYYY-MM-DD
    return `${year}-${month.padStart(2, '0')}-${day.padStart(2, '0')}`;
  };
  
  useEffect(() => {
    setLoading(true);
    const formattedParams = {
      ...searchTerm,
      trip_date: formatStandardDate(searchTerm.trip_date)
    };
    axios.post("https://server.croc-cityshuttle.com/api/get-trips", formattedParams)
      .then(res => {
        setLoading(false);
        setSearchData(res.data);
      })
      .catch(err => {
        setLoading(false);
        console.error('查询出错:', err);
        // 可在此添加用户可见的错误提示，如弹窗或页面内提示
      });
  }, []);
  

• 后端API可增加日期格式校验，确保接收的是标准格式，避免SQL查询出错。

2. 前端请求未处理异常场景 #

你的React代码中axios.post仅编写了then成功回调，未添加catch捕获异常。如果请求出现网络故障、CORS错误、API内部报错等情况，setLoading(false)永远不会执行，页面会持续处于加载状态。

解决方法：

• 强制添加catch捕获所有异常，同时重置loading状态：

  useEffect(() => {
    setLoading(true);
    axios.post("https://server.croc-cityshuttle.com/api/get-trips", searchTerm)
      .then(res => {
        setLoading(false);
        setSearchData(res.data);
      })
      .catch(err => {
        setLoading(false);
        console.error('请求失败:', err);
        // 给用户展示错误提示，比如页面内的文字提示或弹窗
      });
  }, []);
  

3. 地域网络与DNS访问限制 #

同一国家不同城市的用户可能因运营商网络限制，无法访问你的子域名API（server.croc-cityshuttle.com），或存在DNS解析失败的情况，导致请求一直处于pending状态。

排查与解决：

• 让有问题的用户打开浏览器控制台的Network面板，查看/api/get-trips请求的状态（是pending、403、500还是其他）；
• 检查NameCheap主机的防火墙设置，确认是否限制了部分地区的IP访问；
• 验证子域名的DNS解析是否在所有地区都能正常生效；
• 可尝试将API与前端部署在同一域名下（通过反向代理实现），避免跨域问题和子域名访问限制。

4. SQL查询性能超时 #

特定搜索条件下，你的SQL查询因多表关联、缺少索引可能出现超时，导致前端一直等待响应。

优化建议：

• 给trip_tbl的trip_from、trip_to、trip_date、trip_started字段添加索引；
• 给trip_seats_tbl的trip_id、isbooked、vehicle_id字段添加索引；
• 优化SQL语句，减少不必要的表关联，或拆分查询逻辑；
• 在后端API添加请求超时处理，避免请求无限挂起：

  // Express中设置全局请求超时
  const timeout = require('connect-timeout');
  app.use(timeout('5s'));
  app.use((req, res, next) => {
    if (!req.timedout) next();
  });
  
  routes.post("/get-trips", (req, res) => {
    const {trip_from, trip_to, trip_date} = req.body;
    let sql = `SELECT v.vehicle_name as vehicle_name, v.vehicle_photo as vehicle_photo, v.front_seats, v.row1_seats, v.row2_seats, v.row3_seats, v.row4_seats,
    v.no_of_seats as trip_seats, t.trip_id as trip_id, t.trip_vehicle as vehicle_id, t.trip_fare as trip_fare, t.trip_date as trip_time,
    COUNT(tst.trip_id) as available_seats
    FROM trip_tbl t
    JOIN trip_seats_tbl tst ON tst.trip_id = t.trip_id
    JOIN vehicle_tbl v ON v.vehicle_id = t.trip_vehicle 
    WHERE t.trip_from =?  AND t.trip_to =? AND DATE(t.trip_date) =? AND t.trip_started !=1  AND tst.isbooked=0 AND t.trip_vehicle = tst.vehicle_id group by t.trip_id`;
    // 给查询设置超时时间
    con.query(sql, [trip_from, trip_to, trip_date], { timeout: 5000 }, (err, result) => {
      if(err) {
        console.error(err);
        return res.status(500).json({success:false});
      }
      if(result.length > 0) res.json(result)
      else res.json({notFound: true, success:true})
    });
  });
  

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