React Native调用Node.js后端出现JSON解析错误，求排查正则路由问题

错误根源 #

你遇到的JSON解析错误，本质是后端路由不匹配导致返回了非JSON内容（比如404页面），前端尝试把这些内容解析成JSON就会报错。核心问题出在Node.js的路由配置上：

• Express的app.get路由路径只匹配URL的路径部分（即?之前的/api/productData/），查询参数（?searchTerm=xxx&site=xxx）不属于路由路径的一部分，不能写在路由的正则里。
• 你当前写的路由字符串/^\/api\/productData\/\?searchTerm=\w+&site=\w+/会被Express当成普通路径处理，根本不会触发这个路由，所以请求会走到404处理逻辑，返回HTML内容。

修正后的代码 #

Node.js 后端代码 #

// 路由只匹配路径部分，查询参数通过req.query获取
app.get('/api/productData/', async (req, res) => {
  const { searchTerm, site } = req.query;
  // 验证参数是否符合正则规则
  const regex = /^\w+$/;
  if (!regex.test(searchTerm) || !regex.test(site)) {
    return res.status(400).json({ error: '参数格式不正确' });
  }
  // 后续业务逻辑...
  // 示例：返回正确的JSON数据
  res.json({ data: '你的业务数据' });
});

React Native 前端代码（增加错误处理） #

try {
  const response = await fetch(
    `http://192.168.100.133:5000/api/productData/?searchTerm=${searchText}&site=${site}`,
  );
  // 先检查请求是否成功
  if (!response.ok) {
    throw new Error(`请求失败：${response.status}`);
  }
  const data = await response.json();
  // 处理数据...
} catch (error) {
  console.error('请求出错:', error);
}

关键说明 #

• 路由路径只负责匹配URL的路径部分，查询参数统一通过req.query获取，再在处理函数内做格式验证，这是Express的标准用法。
• 前端增加错误处理，可以明确捕获请求失败或解析错误的情况，避免出现未处理的Promise拒绝。

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