Flutter Web使用mysql1包无法连接MySQL数据库求助

我尝试用mysql1包在Flutter Web中连接MySQL数据库，代码如下：

import 'package:mysql1/mysql1.dart';

class Database {

  static var s = ConnectionSettings(
    user: "User",
    password: "Password",
    host: "host",
    port: 3306,
    db: "db",
  );

static Future<MySqlConnection> connect() async{
  return await MySqlConnection.connect(s);

}}

预期能成功连接，但实际无法建立连接。

问题核心原因 #

mysql1库依赖Dart的dart:io模块实现TCP连接，而Flutter Web运行在浏览器沙箱环境中，不允许直接发起TCP连接到外部MySQL服务器——浏览器仅支持HTTP/HTTPS等Web标准协议，这是导致连接失败的根本原因。

可行解决方案 #

1. 后端API中转（推荐）

通过搭建一个后端服务作为中间层，由后端负责连接MySQL数据库，Flutter Web通过HTTP/HTTPS请求与后端API交互，间接操作数据库。

示例后端代码（基于Dart shelf框架）：

import 'package:shelf/shelf.dart';
import 'package:shelf/shelf_io.dart' as shelf_io;
import 'package:mysql1/mysql1.dart';

void main() async {
  // 数据库连接配置
  var connSettings = ConnectionSettings(
    user: "User",
    password: "Password",
    host: "host",
    port: 3306,
    db: "db",
  );
  var dbConn = await MySqlConnection.connect(connSettings);

  // 定义API处理逻辑
  var handler = const Pipeline().addHandler((Request req) async {
    // 示例：执行查询并返回结果
    var queryResult = await dbConn.query('SELECT * FROM your_table_name');
    return Response.ok(queryResult.toString());
  });

  // 启动后端服务
  await shelf_io.serve(handler, 'localhost', 8080);
  print('后端服务运行在 http://localhost:8080');
}

Flutter Web端调用API示例（使用http包）：

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

Future<void> fetchDatabaseData() async {
  final response = await http.get(Uri.parse('http://localhost:8080'));
  if (response.statusCode == 200) {
    print('查询结果：${response.body}');
  } else {
    print('请求失败，状态码：${response.statusCode}');
  }
}

2. 使用Web兼容的BaaS数据库服务

如果不需要自建后端，可以选择Firebase Firestore、Supabase等BaaS（后端即服务）平台，它们提供专门适配Web环境的SDK，可直接在Flutter Web中调用，无需手动处理数据库连接。

重要注意事项 #

• 绝对不要在Flutter Web代码中硬编码数据库账号密码，浏览器环境下代码会被完全暴露，存在严重安全风险。
• 后端API需添加身份验证、权限控制等安全措施，防止非法请求操作数据库。

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