React+TypeScript中Supabase signInWithPassword报502错误求助

核心问题定位 #

从报错信息来看，客户端与Supabase服务端的鉴权链路或TCP连接存在异常：

• signInWithPassword的502错误+无API Key提示：请求未正确携带鉴权头，或请求被中途拦截
• connection reset by peer：TCP连接被异常中断（多由代理拦截或网络限制导致）
• OTP跳转报错：Supabase服务端无法正常访问你的应用回调地址

分步排查与修复 #

1. 确认请求鉴权头是否正确 #

打开浏览器开发者工具「Network」面板，查看signInWithPassword的POST请求：

• 检查请求头中是否存在apikey（值为你的Supabase anonKey）和Authorization: Bearer {anonKey}
• 若缺失，检查客户端初始化代码：

  import { createClient } from '@supabase/supabase-js';
  
  const supabase = createClient(
    process.env.REACT_APP_SUPABASE_URL!,
    process.env.REACT_APP_SUPABASE_ANON_KEY!
  );
  

• 打印process.env.REACT_APP_SUPABASE_ANON_KEY确认环境变量是否正确注入（避免变量名拼写错误，比如少写REACT_APP前缀）

2. 排查本地代理/中间件拦截 #

• 若使用React的setupProxy.js或其他代理工具，检查是否误将Supabase请求转发到本地服务（比如配置了/auth/**的代理规则）
• 临时注释代理配置，重启项目后测试signInWithPassword，若恢复正常则修改代理规则排除Supabase域名

3. 检查Supabase项目的网络限制 #

登录Supabase控制台：

• 进入「Settings > API」，确认「Allowed URLs」已添加你的应用域名（本地开发填http://localhost:3000）
• 若Allowed URLs为空或未包含当前域名，Supabase会拒绝请求导致连接重置

4. 修复OTP回调问题 #

本地开发时，Supabase无法直接访问localhost：

• 使用内网穿透工具生成公网域名，例如执行ngrok http 3000得到https://xxx.ngrok.io
• 在Supabase控制台更新「Site URL」和「Redirect URLs」为该公网域名，重新发送OTP邮件测试

5. 升级Supabase依赖版本 #

旧版本的@supabase/supabase-js可能存在接口兼容性问题：

npm update @supabase/supabase-js

升级到最新稳定版后重新测试

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