Server API not accept JSON edcoded data Flutter

Question

Edit: After hours of work, i might because when i send "content-type": "application/json", it send "application/json; charset=utf-8" to server. How to remove ; charset=utf-8 from header?

Edit2: The problem is because flutter send charset=utf-8 in Content-type. I fix by contact my backend developer to allow "application/json; charset=utf-8" in Content-type header

I send post request to server, return error

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

This is my code:

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;
 }
}

Is there something wrong in my code?

The API work on Postman, ThunderClient VS Code, and React Native

Thanks for your help

I think you just need to use data.toJson() instead of jsonEncode(data). — Moïse Rajesearison, Feb 06 '23 at 05:09
@MoïseRajesearison can't use data.toJson in map: The method 'toJson' isn't defined for the type 'Map'. How to use it? — Ikhsannul Hijri, Feb 06 '23 at 07:09
You're right !!! And Have you already tried json.encode(data); ? — Moïse Rajesearison, Feb 06 '23 at 07:13
@MoïseRajesearison yes. already tried json.encode(data) but same result — Ikhsannul Hijri, Feb 06 '23 at 07:15

score 1 · Answer 1 · answered Feb 06 '23 at 08:56

Create model like this:

import 'dart:convert';

LoginData loginDataFromJson(String str) => LoginData.fromJson(json.decode(str));

String loginDataToJson(LoginData data) => json.encode(data.toJson());

class LoginData {
  LoginData({
    required this.username,
    required this.password,
  });

  final String username;
  final String password;

  factory LoginData.fromJson(Map<String, dynamic> json) => LoginData(
        username: json["username"],
        password: json["password"],
      );

  Map<String, dynamic> toJson() => {
        "username": username,
        "password": password,
      };

  @override
  String toString() {
    return '$runtimeType($username, $password)';
  }

  @override
  bool operator ==(Object other) {
    if (other is LoginData) {
      return username == other.username && password == other.username;
    }
    return false;
  }

  @override
  int get hashCode => hash2(username, password);
}

And now you can write your code like this:

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

Thanks for your help. But still not work. It might because when i send "content-type": "application/json", it send "application/json; charset=utf-8" to server. How to remove ; charset=utf-8 from header? — Ikhsannul Hijri, Feb 06 '23 at 13:32
You can try this solution https://stackoverflow.com/questions/50278258/http-post-with-json-on-body-flutter-dart — Moïse Rajesearison, Feb 06 '23 at 13:38
I fix with contact my backend developer to allow application/json; charset=utf-8 in request header. Thanks for help bro :) — Ikhsannul Hijri, Feb 08 '23 at 13:51

score 0 · Answer 2 · answered Feb 06 '23 at 05:13

The headers field in the http.post method has to be changed to have Content-Type equal to application/json and accept equal to application/json.

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;
      }
    }

Hi. Thanks for your answer. What should i change in my code? — Ikhsannul Hijri, Feb 06 '23 at 07:06
It seems your code is correct. Hmm recommendedto check API Documentation ensure you are sending the correct format of data and headers — Unknown Developer, Feb 06 '23 at 07:29

score 0 · Answer 3 · answered Feb 06 '23 at 05:55

0

Try encode your data using convert

import 'dart:convert' as convert;

//...

const JsonEncoder encoder = JsonEncoder();
final response = await http.post(url,
    headers: {
        "Content-Type": "application/json",
        "accept": "application/json",
    },
    body: encoder.convert(data)
);

Hope this will help

answered Feb 06 '23 at 05:55

JuniorBOMB

336
1
3
11

Hi. thanks for your answer. But still not work – Ikhsannul Hijri Feb 06 '23 at 07:05

Server API not accept JSON edcoded data Flutter

3 Answers3