Angular中$http.get请求返回404：路由匹配失败问题排查

你的问题出在Express路由的配置方式上——你把查询参数（query params）直接写进了路由路径里，但Express的路由只会匹配URL的路径部分，不会包含?后面的查询字符串。

问题根源 #

你当前的路由配置：

router.get('/loadpage?category=xx&page=yy', function(req, res) {
  res.send("Is this working");
});

这里的?category=xx&page=yy是查询参数，不属于路由路径的一部分，所以Express永远不会匹配到这个路由，自然返回404。

正确的解决方案 #

1. 修正Express路由配置

把路由路径改成只匹配/loadpage，然后在回调函数里通过req.query获取查询参数：

router.get('/loadpage', function(req, res) {
  // 获取category和page参数
  const category = req.query.category;
  const page = req.query.page;
  
  console.log(`Received category: ${category}, page: ${page}`);
  res.send("Is this working");
});

2. （可选）优化Angular的请求代码

你的Angular请求代码本身没问题，但可以用参数对象的方式让代码更清晰，避免字符串拼接：

$http.get('/loadpage', {
  params: {
    category: $scope.selectedCategory,
    page: $scope.selectedPage
  }
}).then(function(response){
  // 处理响应
}).catch(function(){
  console.log("Error caught!");
});

这种方式Angular会自动帮你拼接成正确的查询字符串，和原来的效果一致，但可读性更好。

为什么这样能解决问题？ #

当你发送GET /loadpage?category=1&page=1请求时：

• Express会匹配路径/loadpage对应的路由
• 查询参数category和page会被自动解析到req.query对象中，你可以直接取用

这样你的请求就能正确命中路由，不会再返回404了。

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