Flutter无法读取ngrok部署的ASP.NET Web API数据，报XMLHttpRequest错误

1. 报错地址与代码配置不符 #

报错显示请求的是http://localhost:5247/api/Users，但你代码里的baseUri是ngrok的HTTPS地址，这说明实际请求并未使用你配置的ngrok地址。请排查：

• 是否在其他代码位置硬编码了localhost地址？
• 确认ApiHandler类的baseUri是否被正确引用，有没有拼写错误；
• 检查Flutlab环境是否存在覆盖地址的配置或环境变量。

2. 跨域资源共享（CORS）配置缺失 #

Flutlab在线IDE中的Flutter应用运行在其官方域名下，而ngrok转发的API属于独立域名，跨域请求需要ASP.NET Web API配置CORS允许Flutlab域名访问。
在你的ASP.NET Web API项目中添加CORS配置（示例：Program.cs）：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll", policy =>
    {
        policy.AllowAnyOrigin()
              .AllowAnyMethod()
              .AllowAnyHeader();
    });
});

app.UseCors("AllowAll");

3. 错误处理过于隐蔽 #

你的getUserData方法中，catch块直接返回空列表，未打印任何错误信息，导致无法定位具体异常原因。修改代码添加错误日志：

Future<List<Users>> getUserData() async {
  List<Users> data = [];

  final uri = Uri.parse(baseUri);
  try {
    final response = await http.get(
      uri,
      headers: <String, String>{
        'Content-type': 'application/json; charset=UTF-8',
      },
    );

    if (response.statusCode >= 200 && response.statusCode <= 299) {
      final List<dynamic> jsonData = json.decode(response.body);
      data = jsonData.map((json) => Users.fromJson(json)).toList();
    } else {
      print('API请求失败，状态码：${response.statusCode}，响应内容：${response.body}');
    }
  } catch (e) {
    print('请求异常：$e');
    return data;
  }
  return data;
}

4. HTTPS证书验证问题（ngrok免费域名） #

ngrok免费域名的HTTPS证书可能在Flutlab的Web环境中被判定为不安全，导致请求失败。可尝试：

• 启动ngrok时添加--scheme http参数改用HTTP地址；
• 测试阶段临时禁用证书验证（生产环境禁止），需自定义HTTP Client：

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

class MyHttpClient extends http.BaseClient {
  final HttpClient _client = HttpClient()
    ..badCertificateCallback =
        ((X509Certificate cert, String host, int port) => true);

  @override
  Future<http.StreamedResponse> send(http.BaseRequest request) {
    return _client.send(request).then((HttpClientResponse response) {
      return http.StreamedResponse(
        response,
        response.statusCode,
        headers: response.headers,
      );
    });
  }
}

// 替换原请求代码
final response = await MyHttpClient().get(
  uri,
  headers: <String, String>{
    'Content-type': 'application/json; charset=UTF-8',
  },
);

5. Flutter UI代码小问题 #

• onTap: () {();} 是无效代码，改为onTap: () {}；
• late List<Users> data = []; 中late修饰符多余，直接写List<Users> data = [];即可。

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