后端获取GET请求服务URL传递的参数值为undefined如何解决

• Express 中 req.params 用于读取 路由路径中定义的动态参数，例如路由规则为 /filter/search/:family 时，才能通过 req.params.family 拿到路径中对应位置的参数值。
• 前端传递的 family=test 是 URL 问号后的 查询参数，Express 中这类参数需要通过 req.query 读取，这是获取结果为 undefined 的核心原因。

基础修复（必做） #

修改后端参数读取逻辑，将 req.params.family 替换为 req.query.family 即可，修改后代码如下：

router.get('/filter/search', async(req, res, next) => {
  console.log('call backend from service');
  // 替换为req.query读取查询参数
  console.log('family is', req.query.family);

  // 可将family参数传入查询方法实现过滤逻辑
  await BreedingSheet.find({ family: req.query.family })
  .populate('creator')
  .then(documents => {
    res.status(200).json({
      message: 'filtered breeding sheets succesfully loaded',
      breedingSheets: documents
    });
  });
});

可选优化 #

前端请求参数规范化 #

如果后续需要传递多个查询参数，建议使用 Angular HttpClient 自带的 params 配置项自动拼接参数，避免手动拼接 URL 出错，同时要确保 URL 用反引号包裹为模板字符串：

getFiltered(filterData: any[]): Observable<BreedingSheet[]> {
  console.log('from service', filterData);
  return this.http.get<BreedingSheet[]>(`${this.breedingSheetsUrl}/filter/search`, {
    params: { family: 'test' }
  })
  .pipe(
    map(filteredResult => filteredResult['breedingSheets']),
    shareReplay()
  );
}

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