DartPad中用http.dart发起Post请求遇XMLHttpRequest错误求助

错误本质解释 #

你看到的XMLHttpRequest error只是底层报错提示——因为DartPad运行在浏览器环境中，http包底层调用的是浏览器的XMLHttpRequest API，这个错误和你是否提交JSON无关，只是请求失败的通用底层提示。

你的代码矛盾点 #

你代码注释标注要发送表单数据，但你提到提交JSON，这里存在偏差：当给http.post的body传Map时，http包会自动把它编码成application/x-www-form-urlencoded格式的表单数据，不是JSON格式。如果服务器期望接收JSON，这会导致请求无法被正确解析，甚至直接被拒绝。

核心故障原因：跨域（CORS）限制 #

这是DartPad中发起请求最常见的失败原因：浏览器会阻止网页向不同域名/端口的服务器发起请求，除非目标服务器配置了允许跨域的响应头（比如Access-Control-Allow-Origin）。

解决方案 #

1. 正确发送JSON数据（若服务器要求JSON格式） #

修改代码，将Map转为JSON字符串，并设置正确的请求头：

import 'package:http/http.dart' as http;
import 'dart:convert';

void main() async {
  var map = {'username': '**********', 'password': '**********'};

  final response = await http.post(
    Uri.parse('************'),
    body: jsonEncode(map),
    headers: {'Content-Type': 'application/json'},
  );

  print(response.body);
}

2. 解决跨域问题 #

• 若你控制目标服务器：在服务器端添加CORS响应头，开发环境可临时设置Access-Control-Allow-Origin: *，生产环境需限制为具体域名。
• 若你无法控制服务器：
  • 使用本地代理转发请求（比如用Node.js写简单代理脚本，将请求转发到目标服务器）；
  • 用浏览器插件临时绕过CORS限制（仅用于开发测试，不可用于生产环境）。

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