Flutter集成Node.js Express API遇404及JSON解析错误求助

核心问题拆解 #

• 404 Not Found：Flutter请求的端点无法被后端识别，或网络层面无法访问后端服务
• FormatException：404响应的Body通常不是合法JSON，直接执行jsonDecode(response.body)必然抛出解析错误

逐一修复步骤 #

1. 修正localhost访问限制（最常见诱因） #

如果在模拟器/真机运行Flutter，localhost无法指向宿主机的后端服务：

• Android模拟器：替换localhost为10.0.2.2（模拟器专属回环地址，映射宿主机localhost）
• iOS模拟器：可直接用localhost；真机需改用宿主机的局域网IP（如192.168.1.100）
• 代码修改示例：

var baseUrl = 'http://10.0.2.2:52961/api/v1/user/'; // Android模拟器适配
// 真机适配：var baseUrl = 'http://192.168.1.100:52961/api/v1/user/';

2. 补充JSON请求头 #

Postman会自动添加Content-Type: application/json，但Flutter的http.post默认不带该头，后端可能因无法识别请求格式返回404：

var response = await http.post(
  url,
  headers: {'Content-Type': 'application/json'}, // 必须添加
  body: jsonEncode({
    'username': username,
    'email': email,
    'password': password,
  }),
);

3. 兼容非JSON响应 #

当返回404时，响应Body大概率不是JSON，需先做格式判断再解析，避免FormatException：

} else {
  _logger.e('Response status: ${response.statusCode}, body: ${response.body}');
  // 先尝试解析JSON，失败则直接返回原始响应内容
  try {
    final errorData = jsonDecode(response.body);
    return {
      'statusCode': response.statusCode,
      'message': errorData['message'] ?? 'Failed to register user'
    };
  } catch (e) {
    return {
      'statusCode': response.statusCode,
      'message': response.body.isNotEmpty ? response.body : 'Unknown error'
    };
  }
}

4. 校验端点路径一致性 #

核对后端Express路由定义，确保/api/v1/user/register路径完全匹配（注意斜杠位置、大小写、拼写），Flutter拼接后的URL需和Postman中成功请求的URL完全一致。

测试验证建议 #

• 打印Flutter请求的完整URL，和Postman的请求地址对比
• 用设备浏览器访问修改后的URL，确认网络可达性
• 抓包查看Flutter请求的头信息、参数，和Postman的请求做对比

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