Flutter中使用HTTP Client无法向自定义API发送POST请求求助

问题核心分析 #

当前Flutter端GET请求正常，但POST请求返回Response was nothing，结合代码来看，主要问题集中在请求错误处理缺失、序列化逻辑不明确以及状态码覆盖不全这几个点上。

具体修复步骤 #

1. 完善BaseClient的POST方法（核心修复） #

原POST方法仅处理201状态码，且未捕获请求异常，导致任何非201的情况都会返回null，触发错误提示。修改后添加异常捕获、状态码打印和完整的错误处理：

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:flutter/foundation.dart';

const String BASE = "xxx";

class BaseClient {
  var client = http.Client();

  Future<dynamic> get(String api) async {
    var url = Uri.parse(BASE + api);
    var res = await client.get(url);
    if (res.statusCode == 200) {
      return res.body;
    } else {
      debugPrint('GET Status Code: ${res.statusCode}');
      throw Exception('GET request failed');
    }
  }

  Future<dynamic> post(String api, dynamic object) async {
    try {
      var url = Uri.parse(BASE + api);
      // 明确调用toJson方法，确保Item对象正确序列化为JSON
      var _payload = json.encode(object.toJson());
      var _headers = {'Content-Type': 'application/json; charset=UTF-8'};
      
      // 打印调试信息，对比Postman请求
      debugPrint('POST URL: $url');
      debugPrint('POST Payload: $_payload');
      
      var res = await client.post(url, body: _payload, headers: _headers);
      
      debugPrint('POST Status Code: ${res.statusCode}');
      debugPrint('POST Response Body: ${res.body}');

      // 兼容后端返回200或201的情况
      if (res.statusCode == 201 || res.statusCode == 200) {
        return res.body;
      } else {
        throw Exception('Request failed with status: ${res.statusCode}, response: ${res.body}');
      }
    } catch (e) {
      debugPrint('POST Request Error: $e');
      rethrow; // 重新抛出异常，让调用方处理
    }
  }

  Future<dynamic> put(String api) async {}
  Future<dynamic> delete(String api) async {}
}

2. 优化UI中的POST请求回调 #

修改回调逻辑，正确捕获异常并打印详细错误：

CustomButton(
  opr: "POST",
  desc: "Create Items",
  color: Colors.blue.shade400,
  onPressed: () async {
    var item = Item(
      title: "Complete Project",
      description: "", // 给nullable字段赋值，避免后端拒绝null
      color: "blue",
      completed: false,
      priority: true,
      itemImage: "",
      itemLink: "",
      dateTime: DateTime.now(),
    );
    try {
      var res = await BaseClient().post('/create', item);
      if (res != null) {
        debugPrint('POST successful, response: $res');
      } else {
        debugPrint("Response was nothing");
      }
    } catch (e) {
      debugPrint('POST Failed: $e');
    }
  },
),

3. 额外排查点 #

• 验证BASE URL格式：确保BASE变量末尾带有斜杠（如https://your-api-domain.com/），避免拼接后出现xxxcreate这类错误URL。
• 对比Postman请求：通过打印的POST Payload和URL，与Postman中成功请求的参数对比，确认字段名、数据格式完全一致。
• CORS检查（Web端）：如果是Flutter Web项目，需确认后端CORS配置允许POST请求，且允许当前前端域名访问。

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