Flutter项目Supabase Client可用性验证及查询无响应问题排查

问题场景 #

在Flutter项目的main()中初始化Supabase：

///Supabase
await Supabase.initialize(
  url: supabaseBaseUrl,
  anonKey: supabaseBaseKey,
  authFlowType: AuthFlowType.pkce,
  authCallbackUrlHostname: 'login-callback',
  schema: 'public',
);

通过final supabaseClient = Supabase.instance.client;获取实例后，执行以下查询时触发PostgrestException：

checkEmailResponseData = await supabaseClient
    .from('profiles')
    .select<PostgrestList>('user_email')
    .eq('user_email', newUserEmail)
    .withConverter(
        (data) => data.map(Profiles.fromJson).toList(growable: true));

其中Profiles模型类定义：

class Profiles {
     String? userEmail;
     String? userPass;

     Profiles({this.userEmail,this.userPass});


     Profiles.fromJson(Map<String, dynamic> json) {
       userEmail = json['user_email'];
       userPass = json['user_pass'];
      }

     Map<String, dynamic> toJson() {
        final data = Map<String, dynamic>();
         data['user_email'] = this.userEmail;
         data['user_pass'] = this.userPass;
      return data;
     }
    }

错误详情 #

错误返回内容为Cloudflare的人机验证页面，调用栈如下：

I/flutter (16730): error is PostgrestException(message: <!DOCTYPE html><html 
lang="en-US"><head><title>Just a moment...</title><meta http-equiv="Content- 
Type" content="text/html; charset=UTF-8"><meta http-equiv="X-UA-Compatible" 
content="IE=Edge"><meta name="robots" content="noindex,nofollow"><meta 
name="viewport" content="width=device-width,initial-scale=1"><link href="/cdn- 
cgi/styles/challenges.css" rel="stylesheet"></head><body class="no-js"><div 
class="main-wrapper" role="main"><div class="main-content"><noscript><div 
id="challenge-error-title"><div class="h2"><span class="icon-wrapper"><div 
class="heading-icon warning-icon"></div></span><span id="challenge-error- 
text">Enable JavaScript and cookies to continue</span></div></div></noscript> 
</div></div><script>(function(){window._cf_chl_opt={cvId: '2',cZone: 
"ytqwkhvjsqnq.supabase.co",cType: 'managed',cNounce: '64',cRay: 
'81fb5c6a9bb7054f',cHash: 'd46a71266227468',cUPMDTk: "/rest/v1/profiles? 
select=user_email&user_email=eq.lapcell%40hotmail.com&__cf_chl_tk=kQ_DaQf
I/flutter (16730): stack is #0      PostgrestBuilder._parseResponse 
(package:postgrest/src/postgrest_builder.dart:347:7)
I/flutter (16730): #1      PostgrestBuilder._execute 
(package:postgrest/src/postgrest_builder.dart:202:14)
I/flutter (16730): <asynchronous suspension>
I/flutter (16730): #2      PostgrestBuilder.then 
(package:postgrest/src/postgrest_builder.dart:424:24)
I/flutter (16730): <asynchronous suspension>

排查与解决方案 #

错误核心是Supabase的Cloudflare防护触发了人机验证，拦截了Flutter客户端的请求，以下是具体解决步骤：

1. 调整Supabase项目的Cloudflare防护规则 #

• 登录Supabase控制台，进入目标项目的Settings → Security → Cloudflare页面。
• 检查是否开启了Under Attack Mode，如果是，暂时关闭该模式，或调整为较低级别的防护。
• 在Cloudflare防火墙规则中，添加允许Flutter应用请求的规则：比如针对/rest/v1/*路径跳过验证，或添加Flutter客户端的User-Agent到白名单。

2. 配置Supabase客户端的请求参数 #

• 初始化Supabase时，设置自定义HttpClient，模拟浏览器的User-Agent，避免被Cloudflare识别为非浏览器客户端：

  await Supabase.initialize(
    url: supabaseBaseUrl,
    anonKey: supabaseBaseKey,
    authFlowType: AuthFlowType.pkce,
    authCallbackUrlHostname: 'login-callback',
    schema: 'public',
    httpClient: HttpClient()
      ..userAgent = 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36',
  );
  

• 确保客户端启用Cookie支持，Cloudflare验证需要Cookie存储会话信息，Flutter的HttpClient默认支持，若有自定义配置请勿禁用Cookie。

3. 简化查询测试 #

暂时去掉withConverter，直接获取原始响应，排除模型转换的干扰：

final rawResponse = await supabaseClient
    .from('profiles')
    .select('user_email')
    .eq('user_email', newUserEmail);
print(rawResponse);

如果原始响应正常，再逐步添加withConverter进行测试。

4. 排查网络环境 #

• 测试设备若处于特殊网络环境（如需要代理），尝试切换到稳定的公共网络（如移动数据）重新请求。
• 某些地区的Cloudflare验证规则更严格，可尝试更换网络环境测试。

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