Flutter中HTTP Post请求携带Header无法获取API数据的问题

问题描述 #

我编写了LoginPageModel类用于发起HTTP Post请求，代码如下：

class LoginPageModel {
  String CODD_VALU;

  String CODD_DESC;

  LoginPageModel({required this.CODD_VALU, required this.CODD_DESC});

  static Future<LoginPageModel> connect(String CODD_VALU) async {
    Uri url = Uri.parse("http://deltaprima.rmdoo.com/api/office/all");

    var response = await http.post(
      url,
      headers: {
        "CompanyCode": "MW",
      },
    );

    var dataJson = jsonDecode(response.body);
    debugPrint(dataJson);

    return LoginPageModel(
      CODD_VALU: dataJson["CODD_VALU"],
      CODD_DESC: dataJson["CODD_DESC"],
    );
  }
}

随后在页面的initState方法中调用该请求：

void initState() {
    super.initState();
  
    LoginPageModel.connect("MW").then((value) {
      print(value);
    });
  }

但调试控制台无法打印返回值，且必须通过请求头传递CompanyCode。使用Postman测试该API可正常获取如下数组格式数据：

[
    {
        "CODD_DESC": "DELTA PRIMA",
        "CODD_VALU": "01"
    }
]

解决步骤 #

1. 修正API返回数据的解析逻辑 #

Postman返回的是数组类型数据，但原代码直接用dataJson["CODD_VALU"]访问字段，这会导致解析失败（数组无法通过键名取值）。需要先取数组的第一个元素，再提取字段：

static Future<LoginPageModel> connect(String CODD_VALU) async {
  Uri url = Uri.parse("http://deltaprima.rmdoo.com/api/office/all");

  var response = await http.post(
    url,
    headers: {
      "CompanyCode": "MW",
    },
  );

  var dataJson = jsonDecode(response.body);
  // 提取数组的第一个元素
  var officeData = dataJson[0];
  debugPrint(officeData.toString());

  return LoginPageModel(
    CODD_VALU: officeData["CODD_VALU"],
    CODD_DESC: officeData["CODD_DESC"],
  );
}

2. 添加错误捕获与调试日志 #

为了排查请求过程中的异常，在connect方法中增加try-catch块，同时打印响应状态码、响应体，方便定位问题：

static Future<LoginPageModel> connect(String CODD_VALU) async {
  try {
    Uri url = Uri.parse("http://deltaprima.rmdoo.com/api/office/all");

    var response = await http.post(
      url,
      headers: {
        "CompanyCode": "MW",
      },
    );
    // 打印关键调试信息
    debugPrint("响应状态码: ${response.statusCode}");
    debugPrint("原始响应体: ${response.body}");

    if (response.statusCode != 200) {
      throw Exception("请求失败，状态码: ${response.statusCode}");
    }

    var dataJson = jsonDecode(response.body);
    var officeData = dataJson[0];
    return LoginPageModel(
      CODD_VALU: officeData["CODD_VALU"],
      CODD_DESC: officeData["CODD_DESC"],
    );
  } catch (e) {
    debugPrint("请求异常: $e");
    rethrow;
  }
}

同时在initState调用时增加错误捕获，避免静默失败：

void initState() {
  super.initState();

  LoginPageModel.connect("MW").then((value) {
    print("获取到的数据: ${value.CODD_VALU} - ${value.CODD_DESC}");
  }).catchError((error) {
    print("请求出错: $error");
  });
}

3. 配置网络权限与HTTP访问许可 #

• Android端：在android/app/src/main/AndroidManifest.xml中添加网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS端：由于API使用HTTP协议，需要在ios/Runner/Info.plist中添加配置允许非HTTPS请求：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
  </dict>
  

4. 验证请求头是否正确传递 #

可以通过打印请求头或者抓包工具确认CompanyCode是否正确携带。如果API对请求头的大小写敏感，要确保和Postman中的一致（比如CompanyCode的大小写是否匹配）。

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