Flutter Web向NodeJS发POST请求遇XMLHttpRequest错误求助

问题描述 #

从运行在localhost:50259的Flutter Web应用向localhost:3000的Node.js服务器发送POST请求时，触发XMLHttpRequest错误，且Node端req.body始终为undefined。

Flutter Web请求代码 #

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

Node.js服务器接收代码 #

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

报错信息 #

Dart控制台报错 #

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>

Chrome控制台报错 #

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

已尝试的无效解决方案 #

• 删除flutter_tools.stamp，修改chrome.dart中--disable-extensions为--disable-web-security
• 在请求头添加"Access-Control-Allow-Origin": "*"
• 引入并启用CORS中间件：

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

• 安装Cors unblock浏览器扩展

解决建议 #

1. 配置Node.js JSON解析中间件 #

Node.js默认不会自动解析JSON请求体，这是req.body为undefined的核心原因。在app.use(cors())之后、路由定义之前添加：

app.use(express.json()); // 解析JSON格式的请求体

2. 修复SQL语句语法错误 #

INSERT语句缺少闭合括号，会导致数据库执行失败，修正如下：

const query = {
  text: 'INSERT INTO game_schema."Players" ("playerID", "username", "password") VALUES ($1, $2, $3)',
  values: [playerID, username, password]
}

3. 排查连接重置问题 #

ERR_CONNECTION_RESET说明请求未成功到达服务器或连接异常中断：

• 用Postman直接向localhost:3000/addplayer发送POST请求，验证服务器是否正常响应
• 检查防火墙、杀毒软件是否拦截了3000端口的请求
• 重启Flutter Web应用和Node.js服务器
• 若修改过Chrome启动参数，执行flutter clean后重新启动应用：

  flutter clean
  flutter run -d chrome
  

4. 强化CORS配置（可选） #

基础CORS配置无效时，可指定允许的来源、方法和请求头：

app.use(cors({
  origin: 'http://localhost:50259',
  methods: ['POST'],
  allowedHeaders: ['Content-Type']
}));

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