Flutter发起Post请求时API提示数据需为JSON的问题排查与解决

问题场景 #

调用后端API发起Post请求获取Token时，服务器返回如下错误：

{"error":"true","code":"30","message":" Data must JSON"}

使用的Flutter代码如下：

Future<void> _getToken() async {
final url =
    Uri.parse("http://apimobile.xxxx.co.id/Apimobile/auth");
final Map<String, String> data = {
  "username": "xxxx",
  "password": "xxxx"
};
try {
  final response = await http.post(url,
      headers: {
        "Content-Type": "application/json",
        "accept": "application/json",
      },
      body: jsonEncode(data));
  print(response.body);
  final responseData = jsonDecode(response.body);
  _token = responseData["message"];
} catch (error) {
  throw error;
 }
}

该API在Postman、VS Code的ThunderClient插件及React Native项目中均可正常调用，仅Flutter环境下出现错误。

排查与解决 #

经抓包排查发现，Flutter的http.post方法会自动在设置的Content-Type: application/json后追加; charset=utf-8，实际发送的请求头为Content-Type: application/json; charset=utf-8，而后端服务仅严格匹配application/json这一头值，因此返回格式错误提示。

尝试过寻找移除; charset=utf-8的方案，最终通过联系后端开发人员，调整后端服务的Content-Type校验规则，允许application/json; charset=utf-8这一头值后，问题得以解决。

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