本地开发中使用Supabase auth.signUp出现CORS错误求助

核心原因 #

你的Supabase服务未将前端域名http://localhost:3000加入允许的跨域源列表，导致浏览器拦截了跨域请求。你当前提供的配置仅涉及邮件/auth规则，未包含CORS相关设置。

分步解决方案 #

1. 配置Supabase的CORS允许源 #

根据你的Supabase部署方式选择对应操作：

云端Supabase实例

• 登录Supabase控制台，进入目标项目
• 导航到Settings → API页面
• 找到Allowed Origins (CORS)选项，添加http://localhost:3000（后续可补充生产环境域名）
• 保存配置，等待1-2分钟让设置生效

本地自托管Supabase实例

• 打开Supabase项目根目录下的supabase/config/config.toml文件
• 在[api]章节下添加或修改allowed_origins配置：

  [api]
  allowed_origins = ["http://localhost:3000"]
  

• 重启Supabase服务（执行supabase stop && supabase start）

2. 验证Nuxt的Supabase初始化配置 #

确保nuxt.config.ts中的Supabase配置指向正确的实例地址：

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/supabase'],
  supabase: {
    url: process.env.SUPABASE_URL, // 本地实例应为http://localhost:54321
    key: process.env.SUPABASE_ANON_KEY,
  }
})

注意：本地自托管的Supabase主URL是http://localhost:54321，而非请求中显示的auth服务端口54323，SDK会自动路由到对应服务。

3. 清除缓存并重启服务 #

• 清除浏览器缓存（快捷键Ctrl+Shift+Delete），避免旧CORS规则残留
• 重启Nuxt开发服务（npm run dev重启）和Supabase服务，确保所有配置生效

额外排查点 #

• 检查浏览器请求头中的Origin字段是否为http://localhost:3000，CORS校验以该字段为准，而非Referer
• 确认Supabase auth服务正常运行（本地实例可通过supabase status查看服务状态）

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