Flutter Web调用HTTP请求出现ClientException: XMLHttpRequest error如何解决？

常见原因及修复步骤 #

• 修正请求URL格式
  错误信息里的URL http:192.168.xxx.xxx;xxx 格式明显有误，正确格式应为 http://192.168.xxx.xxx:端口号，注意是冒号:而非分号;，同时确认后端服务在指定端口正常运行。

• 配置Node.js后端CORS跨域支持
  Flutter Web运行在浏览器环境，受同源策略限制，必须在Node.js后端配置CORS：

  1. 安装cors包：npm install cors
  2. 在服务代码中引入并启用：

     const express = require('express');
     const cors = require('cors');
     const app = express();
     
     // 开发环境可临时允许所有来源跨域，生产环境需指定具体域名
     app.use(cors());
     
     // 示例：指定允许的前端域名
     // app.use(cors({ origin: "http://localhost:5000" }));
     
     app.listen(3000, () => {
       console.log('Server running on port 3000');
     });
     

• 验证后端服务可用性

  • 用Postman或浏览器直接访问后端接口，确认接口能正常返回数据，排除服务未启动、端口占用或接口逻辑错误的问题。
  • 检查防火墙和网络设置，确保Flutter Web所在设备能访问后端服务器的IP和端口。

• 规范Flutter HTTP请求代码
  确保请求代码无语法错误，示例：

  import 'package:http/http.dart' as http;
  
  Future<void> fetchData() async {
    try {
      final response = await http.get(Uri.parse('http://192.168.xxx.xxx:3000/api/data'));
      if (response.statusCode == 200) {
        // 处理返回数据
      } else {
        // 处理错误状态码
      }
    } catch (e) {
      print('请求错误: $e');
    }
  }
  

• 生产环境额外注意项
  部署后的Flutter Web需确保后端配置了严格的CORS规则（限制允许的域名），同时优先使用HTTPS协议（浏览器对HTTP跨域的限制更严格）。

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