Empty response in API from Dio.Post method in Flutter

Question

I have been trying to connect to a local Node JS API using Flutter Web. I am using the Dio dart Package with a GET and a POST method, however, the response of my POST method does not return anything. See below a few instances of code and what I am seeing:

On my Node JS app I am receiving information from flutter:

'Server is listening on port 8000'
Successfully connected
/login2
{}

The /login2 path and the {} are a console.log in my API from the Flutter incoming data. See now the Dio.post method:

    Future post(String path, Map<String, dynamic> data) async {
    
    try {
      final result = await _dio.post(path, data: data);
      return result.data;
    } catch (e) {
      print(e);
      throw ('Error en el POST');
    }
  }

Also tried with HTTP, heres the piece of code:

Future post2(String id, String password) async {
    print(id);
    print(password);

    final response = await http.post(
      Uri.parse('http://localhost:8000/login2'),
      headers: {
        'Content-Type': 'application/json; charset=UTF-8',
      },
      body: jsonEncode({'user': id, 'password': password}),
    );
    print(response);
  }

I have tried with Postman and this is what I get:

/login2?user=10002&password=123456
{ user: '10002', password: '123456' }

That is both the path and the query {} from the same console.log that is empty from Flutter, meaning that my Node server is indeed receiving data.

Trying as per @Wali Kan suggestion with the Postman configuration:

Future post(String path, Map<String, dynamic> data) async {
    final String formData = data.toString();

    var headers = {'Content-Type': 'text/plain'};
    var request =
        http.Request('POST', Uri.parse('http://localhost:8000' + path));
    request.body = formData;

    print(request.body);
    http.StreamedResponse response = await request.send();

    print(response);

    request.headers.addAll(headers);
    if (response.statusCode == 200) {
      print(await response.stream.bytesToString());
    } else {
      print(response.reasonPhrase);
    }

Still receiving /login2 and {} on the API side.

What I am missing is how to succesfully receive Flutter data so that I can complete the login process on my Node API and then redirect to the user profile page.

Any recommendations on what to test or check? If you need me to share any more pieces of the code let me know, been stuck here for many hours now... Thank you for your time.

Answer 1

headers

HttpHeaders.acceptHeader: "json/application/json",
HttpHeaders.contentTypeHeader: "application/x-www-form-urlencoded"

make sure not to use FormData.fromMap({}) just send your data as normal object and don't forget to include the application/x-www-form-urlencoded content type in your headers. in case your server is running express make sure you have these middleware before processing the request

app.use(express.json())
app.use(express.urlencoded({ extended: true }));