求助：Flutter Web中http.post请求出现ClientException: XMLHttpRequest error的解决方法

1. 补全后端CORS配置 #

即便你提到已配置请求头，仍可能存在遗漏项，需确保PHP后端覆盖以下配置：

• 允许跨域源：开发环境可临时设为*，生产环境指定你的Flutter Web域名
• 允许请求方法：必须包含OPTIONS（浏览器会先发预检请求）
• 允许自定义请求头：匹配你请求里的Accept字段
  可在PHP接口开头添加如下代码：

header("Access-Control-Allow-Origin: *");
header("Access-Control-Allow-Methods: POST, GET, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Accept");

// 直接响应OPTIONS预检请求，避免后续报错
if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    http_response_code(200);
    exit();
}

2. 对齐请求与后端的参数格式 #

你的Flutter代码默认用application/x-www-form-urlencoded格式发送参数，需确认后端解析方式：

• 若后端用$_POST获取参数：保持现有代码即可，确保PHP能正常读取modo和status2
• 若后端期望JSON格式：修改Flutter请求代码，同时调整后端解析逻辑
  Flutter侧修改：

  var result = await http.post(
    Uri.parse(dataurl),
    body: jsonEncode(map),
    headers: {
      "Accept": "application/json",
      "Content-Type": "application/json"
    }
  );
  

  PHP侧修改：

  $rawInput = file_get_contents('php://input');
  $params = json_decode($rawInput, true);
  $modo = $params['modo'] ?? '';
  

3. 用浏览器控制台定位具体错误 #

打开浏览器开发者工具（F12）→ 切换到Network标签：

• 查看请求的真实状态码（可能是403、500等，http库未必能捕获完整信息）
• 查看Response内容，后端可能返回了PHP报错详情
• 确认Request Headers里的Origin字段是否在后端允许列表内

4. 验证接口本身的可用性 #

用Postman或curl直接调用接口，排除Flutter Web环境干扰：

• 发送POST请求，携带参数modo=pesquisar、status2=，请求头Accept: application/json
• 如果Postman也报错：排查后端代码变更、服务器配置（比如最近是否重启、权限调整）
• 如果Postman正常：问题集中在浏览器CORS规则或Flutter请求配置

5. 尝试替换http库 #

若以上方案无效，可改用dio库，它对Flutter Web的跨域场景支持更稳定：

• 添加依赖：dio: ^5.0.0
• 改写请求代码：

  import 'package:dio/dio.dart';
  
  // ...
  
  final dio = Dio();
  final response = await dio.post(
    dataurl,
    data: map,
    options: Options(headers: {"Accept": "application/json"})
  );
  if (response.statusCode == 200) {
    // 后续处理逻辑不变
  }
  

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