Flutter连接Docker自建Supabase遇404及API密钥问题求助

问题背景 #

作为Flutter和Supabase新手，参照官方文档编写代码，已通过.env配置正常访问本地Supabase仪表盘（http://localhost:8000），并在supatest schema下创建countries表、插入测试数据。但运行代码时，页面持续显示加载指示器，无法加载数据。

代码片段 #

import 'package:flutter/material.dart';
import 'package:supabase_flutter/supabase_flutter.dart';

Future<void> main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Supabase.initialize(
    url: 'http://localhost:8000',
    anonKey: 'KEY_REDACTED_BUT_IT_IS_THE_SAME_IN_DOTENV',
  );
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Countries',
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  const HomePage({super.key});

  @override
  State<HomePage> createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  final _future = Supabase.instance.client.from('supatest.countries').select();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: FutureBuilder<List<Map<String, dynamic>>>(
        future: _future,
        builder: (context, snapshot) {
          if (!snapshot.hasData) {
            return const Center(child: CircularProgressIndicator());
          }
          final countries = snapshot.data!;
          return ListView.builder(
            itemCount: countries.length,
            itemBuilder: ((context, index) {
              final country = countries[index];
              return ListTile(
                title: Text(country['name']),
              );
            }),
          );
        },
      ),
    );
  }
}

错误信息 #

• 浏览器开发者工具提示：Failed to load resource: the server responded with a status of 404 (Not Found)
• 报错请求URL：http://localhost:8000/rest/v1/supatest.countries?select=%2A
• 页面返回内容：Kong Error No API key found in request

依赖配置（pubspec.yaml） #

...
dependencies:
  flutter:
    sdk: flutter
  supabase_flutter: ^2.3.2

解决方案 #

1. 修正Supabase初始化的API地址 #

本地Supabase的仪表盘地址（8000）和REST API地址不是同一个端口，REST API默认端口是54321。你错误地将仪表盘地址作为API URL传入初始化方法，导致请求发送到错误的服务，返回404和无API Key错误。

修改初始化代码：

await Supabase.initialize(
  url: 'http://localhost:54321', // 替换为REST API端口
  anonKey: 'YOUR_ANON_KEY_FROM_DOTENV',
);

2. 正确调用自定义Schema的表 #

Supabase Dart客户端调用非public schema的表时，不能直接用from('supatest.countries')，这种写法会把整个字符串当作表名，导致API找不到对应资源。需要显式指定schema：

方式一：使用schema参数

final _future = Supabase.instance.client.from('countries', schema: 'supatest').select();

方式二：先指定schema再调用表

final _future = Supabase.instance.client.schema('supatest').from('countries').select();

3. 确保Anon角色有自定义Schema的访问权限 #

在Supabase仪表盘的SQL编辑器中执行以下SQL，给anon角色授予supatest schema的使用权限和countries表的查询权限：

GRANT USAGE ON SCHEMA supatest TO anon;
GRANT SELECT ON TABLE supatest.countries TO anon;

完成以上三步后，重新运行代码即可正常加载数据。

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