Flutter HTTP POST request XMLHttpRequest error

Question

I know this question has been asked multiple times but not a single answer has worked for me so far. The problem is whenever I try to send a post request to my NodeJS server from my flutter frontend I get an XMLHttpRequest error.

Note: I am running flutter as a web app on localhost:50259 and the node server on localhost:3000

Here is the dart code for the post request:

Future<void> addPlayer(Player player) async {
  final Uri url = Uri.parse('$baseUrl/addplayer'); // baseUrl = http://localhost:3000

  final Map<String, String> headers = {
    'Content-Type': 'application/json'
  };

  final body = jsonEncode({
    'playerID': player.playerID,
    'username': player.userName,
    'password': player.password
  });

  final response = await http.post(url, headers: headers, body: body);
}

Here is the NodeJS server code that should receive the request: It actually executes but is blocked somehow because the body is undefined.

app.post('/addplayer', async (req, res) => {
  console.log(req.body) // Logs undefined
  const { playerID, username, password } = req.body // Crashes
  const query = {
    text: 'INSERT INTO game_schema."Players" ("playerID", "username", "password"',
    values: [playerID, username, password]
  }

  try {
    await pool.query(query);
    res.status(200).send('Player added successfully');
  } catch (error) {
    console.error(error);
    res.status(500).send('Error adding player');
  }
});

Here is the error from the dart console:

Error: XMLHttpRequest error.
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 299:10  createErrorWithStack
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 355:28            _throw
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/core/errors.dart 120:5                                           throwWithStackTrace
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1385:11                                          callback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 40:11                              _microtaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/schedule_microtask.dart 49:5                               _startMicrotaskLoop
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 166:15           <fn>

Here are the errors I get from the chrome console:

GET http://localhost:3000/addplayer net::ERR_CONNECTION_RESET

POST http://localhost:3000/addplayer net::ERR_CONNECTION_RESET

Uncaught (in promise) Error: XMLHttpRequest error.
    C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/patch/core_patch.dart 977:28                get current
packages/http/src/browser_client.dart 81:22                                                                                    <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/zone.dart 1660:54                                              runUnary
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 147:18                                        handleValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 767:44                                        handleValueCallback
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 796:13                                        _propagateToListeners
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/future_impl.dart 558:7                                         [_complete]
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream_pipe.dart 61:11                                         _cancelAndValue
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/async/stream.dart 1587:7                                             <fn>
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 367:37  _checkAndCall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/operations.dart 372:39  dcall
C:/b/s/w/ir/cache/builder/src/out/host_debug/dart-sdk/lib/html/dart2js/html_dart2js.dart 37367:58                              <fn>


    at Object.createErrorWithStack (errors.dart:299:10)
    at Error._throw (core_patch.dart:355:28)
    at Error.throwWithStackTrace (errors.dart:120:5)
    at async._AsyncCallbackEntry.new.callback (zone.dart:1385:11)
    at Object._microtaskLoop (schedule_microtask.dart:40:11)
    at _startMicrotaskLoop (schedule_microtask.dart:49:5)
    at async_patch.dart:166:15

What I have tried so far:

This answer Deleting flutter_tools.stamp, then editing chrome.dart --disable-extensions to --disable-web-security.
Adding "Access-Control-Allow-Origin": "*" to the request header.
Adding:

const cors = require('cors')
app.use(cors())

Installing Cors unblock extension.

Nothing seems to be working.

Flutter HTTP POST request XMLHttpRequest error

0 Answers0