Flutter应用调用UPDATE API返回404状态码问题排查

问题说明 #

GET和POST类型API均可正常工作，但调用UPDATE接口时始终返回404 Not Found状态码。

相关代码片段 #

Node.js后端UPDATE接口 #

// NodeJs update method
app.post("/api/update/:id ", (req, res) => {
  let id = req.params.id * 1;
  let productTobeUpdate = productData.find((p) => p.id === id);
  let index = productData.indexOf(productTobeUpdate);
  productData[index] = req.body;
  res.status(200).send({
    status: "Success",
    message: "Product Updated",
  });
  print(res);
});

Flutter前端请求代码 #

//flutter Update API
// update method
static updateProduct(id, body) async {
  var url = Uri.parse("${baseUrl}update/$id");

  final res = await http.post(url, body: body);

  if (res.statusCode == 200) {
    print(jsonDecode(res.body));
  } else {
    print("Failed to update");
  }
}

问题原因及修复方案 #

1. 路由路径不匹配：Node.js的路由定义"/api/update/:id "末尾多了一个空格，导致实际匹配的路径是带空格的，而Flutter请求的路径没有空格，后端找不到对应路由，返回404。
   • 修复：把Node.js的路由改为"/api/update/:id"（删除末尾空格）。
2. RESTful规范建议：更新操作通常使用PUT方法而非POST，建议调整后端为app.put("/api/update/:id", ...)，前端改为await http.put(url, body: body)，既符合规范也能避免和新增接口混淆。

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